How vuex calls mutations method in non-component

Calling mutations method in non-component

Generally speaking, the methods in the call are in the component. If you want to call them in non-components, you need to use the following method.

Called in component

import {mapMutations} from 'vuex'
import {SET_IS_LOGIN} from 'store/mutation-types'
export default {
    methods: {
        ...mapMutations({
            set_is_login: SET_IS_LOGIN
        }),
        init() {
            this.set_is_login(true)
        }
    }
}

Called in non-component

import store from 'store'
import {SET_IS_LOGIN} from 'store/mutation-types'
function init() {
    (SET_IS_LOGIN, true)
}

vuex mutations property

Introduction to mutations attribute

It is the only way to modify the state in the state; in the component's custom method, use this.$('corresponding to the method in mutations', new value) method to submit the new value to the corresponding method in mutations. Each method in the mutations attribute has two parameters, the ratio is state and payload; state is actually the state property in vuex, and payload is called the payload of mutations, which is actually the passed value. Generally, payload passes an object, so that it can contain multiple fields and the mutation of the record will be more readable:

mutations: {
  increment (state, payload) {
     += 
  }
}

('increment', {
  amount: 10
})

Object style submission method

Another way to submit mutation is to use objects that contain type attributes directly:

({
  type: 'increment',
  amount: 10
})

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

mutations: {
  increment (state, payload) {
     += 
  }
}

Use constants instead of Mutation event types

Using constants instead of mutation event types is a common pattern in various Flux implementations. This allows tools like linter to work, while placing these constants in a separate file will allow your code collaborators to see the mutations contained in the entire app at a glance:

// 
export const SOME_MUTATION = 'SOME_MUTATION'

// 
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new ({
  state: { ... },
  mutations: {
    // We can use the ES2015-style computed attribute naming function to use a constant as the function name    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

Whether to use constants or not depends on you - this can be helpful in large projects that require multiple people to collaborate. But if you don't like it, you can never do it.

Mutation must be a synchronous function

An important principle is to remember that mutation must be a synchronous function. Why? Please refer to the following example:

mutations: {
  someMutation (state) {
    (() => {
      ++
    })
  }
}

Now imagine that we are debugging an app and observing the mutation log in devtool. Each mutation is recorded, and devtools needs to capture snapshots of the previous and next states. However, in the above example, the callback in the asynchronous function in mutation makes this impossible: because when mutation is triggered, the callback function has not been called yet, devtools does not know when the callback function is actually called - essentially any state changes made in the callback function are untraceable.

Submit Mutation in component

You can use this.$('xxx') in your component to submit mutations, or use the mapMutations helper function to map methods in the component to a call (need to inject store at the root node).

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // Map `()` to `this.$('increment')`      // `mapMutations` also supports payloads:      'incrementBy' // Map `(amount)` to `this.$('incrementBy', amount)`    ]),
    ...mapMutations({
      add: 'increment' // Map `()` to `this.$('increment')`    })
  }
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.