CODEWITHSUNDEEP
vue.jsvuex
AlekseyHoffman
AlekseyHoffman

Reputation: 2694

Vuex - is it a good idea to ignore mutation handlers and always mutate the store data directly?

Using mutation handlers requires you to write hundreds of times more code compared to direct mutations (in large apps, if you follow official guidelines) because they require computed properties and store mutations for every nested state property.

I know that not using mutation handlers, in theory, makes it more difficult to track down the source of some errors, but in practice, if there's only a few functions that change a specific state property, it's pretty easy to determine which one of them caused the error by following the event logic because mutations are in most cases caused by some sort of known event (button press, input change, etc), so when an error appears during a specific event, it's not that difficult to track down the function that caused it, without using mutation handlers anyway.

The question is what do you actually lose if all components mutate store data directly without using mutation handlers (except debugging)?

Like this, for example:

App.vue

<v-btn @click="createNewItem({ type: 'file', extension: 'txt' })">
  Create new item
</v-btn>

methods: {
  createNewItem (params) {
    // Set dialog data
    this.$store.state.dialogs.createNewItemDialog.data = { 
      ...this.$store.state.dialogs.createNewItemDialog.data,
      ...params 
    }
    // Open dialog
    this.$store.state.dialogs.createNewItemDialog.isOpened = true
  }
}

Dialogs.vue

<v-dialog v-model="$store.state.dialogs.createNewItemDialog.isOpened">
  <div class="title">
    Create new {{$store.state.dialogs.createNewItemDialog.data.type}}
  </div>
  <v-text-field
    v-model="createNewItemDialog.data.name"
  />
  <v-btn @click="$store.state.dialogs.createNewItemDialog.isOpened = false">
    close dialog
  </v-btn>
</v-dialog>

// NO COMPUTED PROPERTIES NEEDED

store.js

state = {
  dialogs: {
    createNewItemDialog: {
      value: false,
      data: {
        type: 'file',
        name: '',
        extension: ''
      }
    } 
  }
}

// NO MUTATIONS AND ACTIONS NEEDED

Upvotes: 3

Views: 1415

Answers (3)

Buksy
Buksy

Reputation: 12218

You will loose perspective. Your application might be simple now, but that may change in future as you will be adding new features.

You already mentioned some pros of mutations. So if it's long term project, then those extra lines might be worth it.

Upvotes: 0

Kunukn
Kunukn

Reputation: 2236

The question is what do you actually lose if all components mutate store data directly without using mutation handlers (except debugging)?

You will loose vue-devtools Vuex debugging information. Updates won't appear there.

The question could be. What do you actually need? If it is a reactive global dialogs state that you need. Then you can use it like that.

But then maybe Vuex might be an overkill for the purpose.

Upvotes: 1

Imre Ujlaki
Imre Ujlaki

Reputation: 335

As I remember we got error in production when we accidentally let a direct references to a variable in $store, I don't remember what was the real problem anyway, maybe it was only a coincidence.

Another reason to use mutations to handle change of state in one place. If you have "side effect" you can handle this, e.g: if you delete one of your state property whick can indicate to delete another one or recalculate something.

Upvotes: 1

Related Questions