This is the 12th day of my participation in the More text Challenge. For details, see more text Challenge

What is Vuex?

Vuex is a state management pattern developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application, and rules to ensure that the state changes in a predictable manner.

Code demo

First, let’s assume that State has the following data

// Similar to the data component, which defines the common data of the component
 state: {

    book: 'jQuery',}Copy the code

Then we have to modify the book in the group price, and now the method of modification is defined in mutations

// The similar component methods defines how to modify the state
mutations: {

    modifyBook(state, data) {
       // Change the value passed in when there is a commit payload, otherwise change the default to React
       state.book = data || 'React'; }},Copy the code

Mutations and Actions are used in the component’s Methods, while State and Getters are used in the component’s computed

methods: {

    // Submit modifyBook to change the state book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   Mutations, maps... mapMutations(['modifyBook']), */

}
Copy the code

At this point, you can use the modifyBook method to change the value of book in state.

So the question is, what if I want to do other things after modification?

And that’s where we use Dispatch to make a little bit of it. Then look down!

First, we know that using Dispatches is used in actions, so we need to define the method to submit mutations in actions

Actions: {actions1 ({commit}, data) {{commit} is equivalent to context.com MIT// Submit the modifyBook for mutationsModifyBook ==> Name should be exactly the same as defined in mutations'modifyBook', data); }}Copy the code

Why is {commit} written above?

Since context is an object, we can use es6’s deconstruction to create a commit, so we’ll write {commit}

/ / case

 actions: {
    ac1(context, data) {
      console.log('context ==> ', context);

      / / the context: object
      //context.com MIT: Mutations to submit the current module
      // Context. dispatch: The actions used to commit the current module
      // Context. state: the state used to operate the current module
      // Context. getters: The getters used to manipulate the current module
      // Context. rootState: used to operate the global state
      // Context.rootgetters: global getters used to operate}},Copy the code

Return to the methods in the component

methods: {

    // Submit modifyBook to change the state book
    modifyBook() {
      this.$store.commit('modifyBook');
    },

    
   Mutations, maps... mapMutations(['modifyBook']), */


     Mutations are submitted to modify state through actions
    action1() {
      // After submitting actions and taking a parameter, return a promise and perform an asynchronous operation
      this.$store.dispatch('action1'.'Bootstrap').then(（） => {
        console.log('I've been executed! ');
      });
    },


     // Bootstrap = "I'm executing"; // Bootstrap = "I'm executing";
}
Copy the code

conclusion

So at this point we know that Dispatch can do other things after they perform mutations, like do some other operations on local storage.

The similarities and differences

  1. Both commit and Dispatch methods are mutations that pass values to vuex to change state

  2. The differences are generally just differences in access methods

Commit: The actions that commit the current module (Actions that can commit mutations, which can perform asynchronous operations). Commit For those that can't, dispatch can commitCopy the code

  1. Mutations modify state, action submit mutations. ==> this.$store.dispatch().then() ==> this.$store.dispatch().

  2. The difference between synchronous and asynchronous

    Commit: use this. Store.com MIT ('changeValue',name) to store this.$store.state. ChangeValue dispatch: The asynchronous operation stores this.$store.dispatch(' getLists ',name) value this.$store.gettersCopy the code

Series of links

CodeSandbox online code demo

Pay attention toIf CodeSandBox fails to open, please try the following operations, and then the window can be viewed while looking at the code to see the effect

  • Vuex series (I) — the use of Vuex
  • Vuex series (ii) — The use of modularity
  • Vuex Series (III) — the difference and usage of store.com MIT and Store. dispatch
  • Vuex series (IV) — Auxiliary function mapMutations analysis