Shulou(Shulou.com)06/01 Report--

This article mainly explains "how vuex calls mutations methods in non-components". The explanation in this article is simple and clear, and is easy to learn and understand. Please follow the editor's train of thought to study and learn "how vuex calls mutations methods in non-components".

Call the mutations method in a non-component

In general, methods in mutations.js are called in components, and if you want to call them in non-components, you need to use the following methods

Call import {mapMutations} from 'vuex'import {SET_IS_LOGIN} from' store/mutation-types'export default {methods: {... mapMutations ({set_is_login: SET_IS_LOGIN}) in the component Init () {this.set_is_login (true)} call import store from 'store'import {SET_IS_LOGIN} from' store/mutation-types'function init () {store.commit (SET_IS_LOGIN, true)} vuex's mutations property mutations property introduction

Is the only way to modify the state in state; in the custom method of the component, use the this.$store.commit ('corresponding to the method in mutations', the 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 for state and payload;state is actually the state attribute in vuex, and payload is called the load of mutations, which is actually the passed value. Generally, payload passes an object so that it can contain multiple fields and the recorded mutation is easier to read:

Mutations: {increment (state, payload) {state.count + = payload.amount}} store.commit ('increment', {amount: 10}) object-style submission method

Another way to submit a mutation is to directly use an object that contains the type attribute:

Store.commit ({type: 'increment', amount: 10})

When an object-style submission is used, the entire object is passed to the mutation function as a payload, so the handler remains the same:

Mutations: {increment (state, payload) {state.count + = payload.amount}} replace Mutation event types with constants

Replacing mutation event types with constants is a common pattern in various Flux implementations. This enables tools such as linter to work, while keeping these constants in separate files so that your code collaborators can see at a glance the mutation contained in the entire app:

/ / mutation-types.jsexport const SOME_MUTATION = 'SOME_MUTATION'// store.jsimport Vuex from' vuex'import {SOME_MUTATION} from'. / mutation-types'const store = new Vuex.Store ({state: {...}, mutations: {/ / We can use the ES2015-style computational attribute naming feature to use a constant as the function name [SOME_MUTATION] (state) {/ / mutate state}})

Whether you use constants or not is up to you-this can be helpful in large projects that require multi-person collaboration. But if you don't like it, you don't have to do it.

Mutation must be a synchronization function

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

Mutations: {someMutation (state) {api.callAsyncMethod (() = > {state.count++})}}

Now imagine that we are debug an app and observe the mutation log in devtool. Each mutation is recorded, and the devtools needs to capture a snapshot of the previous state and the latter state. However, in the above example, the callback in the asynchronous function in mutation makes this impossible: because when the mutation is triggered, the callback function has not been called, and devtools does not know when the callback function is actually called-essentially any state change made in the callback function is untraceable.

Submit a Mutation in a component

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

Import {mapMutations} from 'vuex'export default {/ /... Methods: {... mapMutations (['increment', / / map `Mutations` to `this.$store.commit (' increment') `/ / `mapMutations` also supports payload: 'incrementBy' / / map `this.incrementBy (amount)` to `this.$store.commit (' incrementBy', amount) `]) .. mapMutations ({add: 'increment' / / Map `this.add () `to `this.$store.commit (' increment')`})}} Thank you for your reading The above is the content of "how vuex calls mutations methods in non-components". After the study of this article, I believe you have a deeper understanding of how vuex calls mutations methods in non-components, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.