1, Vuex overview

1. Official documents: https://vuex.vuejs.org/zh/Vuex Is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

2. Vuex simple understanding: each component in Vue application encapsulates its own data attributes in data(), and these data attributes are private and completely isolated. If we want multiple components to read the same state data attribute, or the behavior of different components needs to update the same state data attribute, we need a centralized management of the shared state data attribute. This is the problem to be solved by vuex state management.

3. I can't write such a profound understanding of what is copied above.

2, Try it all

1. First create a Vue project, install it manually, vuex router, version 2. X, and then press enter. Hahaha

2. Then run the service

3. Interview question: the core of every Vuex application is the store

4. Add in index.js under the store file   count:   0:

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {},
    actions: {},
    modules: {}
})

5. Then let him display it on the page and find the home.vue of views:

<template>
  <div class="home">
     <h1>1111</h1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

6. Effect:

7. Use {{$store.state}} to get the status object,

<template>
  <div class="home">
     <h1>{{$store.state.count}}</h1>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

8. Effect:

  9. We can change the value count and return to index.js under the store file through mutations:

 mutations: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        }
    },

10. Go back to home.vue of views:

<template>
  <div class="home">
     <h1>{{$store.state.count}}</h1>
     <button @click="add">++</button>
     <button @click="decrement">--</button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

11. export   Add method to default:

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  methods: {
    add() {

      
    },
    decrement() {},
  },
};

12. Official website - you can submit a change from the component method - this.$store.commit:

methods: {
    add() {
      this.$store.commit("increment");
    },
    decrement() {
      this.$store.commit("decrement");
    },
  },

13. Now you can click + +, 0 + +, and click --, 0--

14. As stated on the official website, the store is regarded as a warehouse, and then its internal methods are called in the component to realize its changes.

3, Try mutation

The only way to change the state in Vuex's store is to submit a mutation. Instead of calling a mutation directly, you need to call it with the corresponding type   store.commit   method

1. Can we use it in other components? In about.vue of views,

<template>
  <div class="about">
     <h1>{{ $store.state.count }}</h1>
  </div>
</template>

2. It was found that you can also get it.

3. Then, can we add a new value, add an n, and go back to index.js under the store file:

 mutations: {
        increment(state, n) {
            state.count += n
        },
        decrement(state) {
            state.count--
        }
    },

After returning to home.vue of views:

 methods: {
    add() {
      this.$store.commit("increment",10);
    },
    decrement() {
      this.$store.commit("decrement");
    },
  },

4. It was found that you can get it. This is called load, which can be applied to   store.commit   Pass in additional parameters, that is, the value of mutation   Load (payload)

4, Action

Action is similar to mutation in that:

• The Action submits the mutation instead of directly changing the status.
• An Action can contain any asynchronous Action.

1. In index.js under the store file:

    actions: {
        dec({ commit }) {
            commit("decrement")
        },
    },

2. Use in components   this.$store.dispatch('xxx')   Distribute the action. After returning to the home.vue of views:

decrement() {
      // this.$store.commit("decrement");
       this.$store.dispatch('dec')
    },

3. The test can realize subtraction operation.

4. In Action, add a new value in the structure assignment form. In index.js under the store file:

add({ commit }) {
            commit("increment", 10)
        }

After returning to home.vue of views:

 add() {
      // this.$store.commit("increment",10);
       this.$store.dispatch('add')
    },

5. The test can realize the operation of adding 10.

6. Add a new value in the default form. In index.js under the store file, add the following to the original add() comment:

 add(contxt) {
            contxt.commit("increment", 10)
        }

7. The test found that the operation of adding 10 can also be realized.