• This is the 25th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Vuex_Mutation

The only way to change the state in Vuex’s store is to commit mutation.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
       // Change the state
      state.count++
    }
  }
})
Copy the code

You cannot call a mutation handler directly. This option is more like event registration: “The subfunction is called when a mutation of type increment is triggered.” :

this.$store.commit('increment');
Copy the code

Commit Mutation in the component

In addition to using this. Codestore.mit (‘ XXX ‘) to commit mutation in the component, you can also use the mapMutations helper function:

import { mapMutations } from 'vuex' export default { // ... methods: { ... MapMutations ([' increments ', // map 'this.increment()' to 'this.store.com MIT (' increments ')']),... Apply mutations ({add: 'increment' // map 'this.add()' to 'this.store.com MIT ('increment')'})}}Copy the code

Payload submission

You can pass an additional parameter, payload, to store.mit:

mutations: {
  increment (state, n) {
    state.count += n
  }
}
Copy the code
store.commit('increment'.10)
Copy the code

In most cases, the payload should be an object, which can contain multiple fields and the mutation recorded will be more readable:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
Copy the code
store.commit('increment', {
  amount: 10
})
Copy the code

Object style submission

Another way to submit mutation is to use an object containing the type attribute directly:

store.commit({
  type: 'increment'.amount: 10
})
Copy the code

When using an object-style commit, the entire object is passed as a payload to the mutation function, so the handler remains unchanged:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
Copy the code

Replace Mutation event types with constants

Keeping these constants in a separate file allows your code collaborators to see the mutations in the entire app at a glance:

 // mutation-types.js
export const COUNT_INCREMENT = 'COUNT_INCREMENT'
Copy the code
 // store.js
import Vuex from 'vuex'
import { COUNT_INCREMENT } from './mutation-types'

const store = new Vuex.Store({
  state: {... },mutations: {
    [COUNT_INCREMENT] (state) {
       // ... }}})Copy the code

The Mutation complies with the Vue response rules

Since the state in Vuex’s Store is responsive, the Vue component that monitors the state updates automatically when we change the state. This also means that mutation in Vuex requires the same precautions as mutation in Vue:

  • It is best to initialize all required properties in your store in advance.

  • When you need to add new properties to an object, you should

    • Use vue.set (obj, ‘newProp’, 123), or

    • Replace an old object with a new one. For example, with the object expansion operator we can write:

      state.obj = { ... state.obj,newProp: 123 }
Copy the code

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤