Mutations | vue context commit
TheonlywaytoactuallychangestateinaVuexstoreisbycommittingamutation.Vuexmutationsareverysimilartoevents:eachmutationhasastringtypeandahandler.Thehandlerfunctioniswhereweperformactualstatemodifications,anditwillreceivethestateasthefirstargument:conststore=createStore({state:{count:1},mutations:{increment(state){state.count++}}})Youcannotdirectlycallamutationhandler.Thinkofitmorelikeeventregistration:"Whenamutationwithtypeincrementistriggered,callthishandler."Toinvokeamutationhandler,youneedtoc...
The only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument:
const store = createStore({ state: { count: 1 }, mutations: { increment (state) { state.count++ } } })You cannot directly call a mutation handler. Think of it more like event registration: "When a mutation with type increment is triggered, call this handler." To invoke a mutation handler, you need to call store.commit with its type:
store.commit(increment) Commit with PayloadYou can pass an additional argument to store.commit, which is called the payload for the mutation:
mutations: { increment (state, n) { state.count += n } } store.commit(increment, 10)In most cases, the payload should be an object so that it can contain multiple...