1 Why is status management needed

A Vue component is divided into data (model) and view (view). When data is updated through methods in methods, the view is updated automatically.

message.vue

<template>
    <div>
        {{message}}
        <button @click="changeMessage"</button> </div> </template> <script>export default {
        name: "message".data() {
            return {
                message: 'hello'
            };
        },
        methods: {
            changeMessage() {
                this.message = 'I'm fine'
            }
        }
    }
</script>
Copy the code

Effect:

Message and changeMessage() in this example can only be used in the message.vue component. In practice, it is common to share data across components. At this point, Vuex can be used to gracefully and efficiently manage component state

Note: Vuex has some technical hurdles and is mainly used for large, single-page applications developed by multiple people. So whether or not to use Vuex depends on the size of the team and the skill set.

2 install Vuex

npm install --save vuex
Copy the code

Installation version: [email protected]

3 Basic Usage

3.1 introduced Vuex

Introduce Vuex in main.js:

. // Introduce the vuex plugin import vuex from'vuex'; . // Load vuex plugin vue.use (vuex); //Vuex configuration const store = new vuex. store ({state: {... }, mutations: { ... }}); . new Vue({ el:'#app'. // use Vuex store: store,... })Copy the code

Store in Vuex contains the data state and operation process of an application. As data changes in the Store, components that use that data are updated immediately.

3.2 Defining Data

The data is defined in the States property of Vuex.

Let’s take the counter for example. Defines a count data and initializes it to 0:

const store = new Vuex.Store({
    state: {
        count: 0
    }
});
Copy the code

3.3 Reading Data

After the data is defined, it can be read from the vue component with $store.state.count.

<template>

    <div>
       ...
        {{count}}
      ...
    </div>
</template>

<script>
    export default {
        name: "index.vue",
        computed: {
            count() {
                return this.$store.state.count; }},... } </script>Copy the code

The current value of the counter is read from Vuex’s Store using the calculated property.

3.4 Modifying Data

The mutations attribute of Vuex can be used to modify the data defined in state. We define increment and decrement operations for counters:

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, n = 1) { state.count += n; }, decrease(state) { state.count--; }}});Copy the code

The function in mutations can have two entries. The first entry is state, and the second can be of any type. For example, you can specify the increment for new operations. If you don’t specify it, the increment defaults to 1.

Note: If we need to pass more than one parameter, we can pass an object with more than one parameter here.

The ES 6 syntax for setting default values for functions is used here. Increment (state, n = 1)

increment (state, n){
 n = n || 1;
}
Copy the code

Mutations can be performed using this. Codestore.mit method in the *. Vue component. In index.vue, we have added three buttons for “+ 1 “, “-1” and “+3” operations:

<template>

    <div>
 
        {{count}}
        <button @click="handleIncrement">+1</button>
        <button @click="handleDecrease">-1</button>
        <button @click="handleIncrementMore">+3</button>
    </div>
</template>

<script>
    export default {
        ...
        methods: {
            handleIncrement() {
                this.$store.commit('increment');
            },
            handleDecrease() {
                this.$store.commit('decrease');
            },
           handleIncrementMore() {
                this.$store.commit('increment', 3);
            }
         }
      }
</script>
Copy the code

This. codestore.mit method entry, is the function name defined in mutations.

You can also submit it by specifying type, which is the function name defined on mutations:

main.js

const store = new Vuex.Store({ state: { count: 0 }, mutations: { ... incrementByParam(state, params) { state.count += params.count; }}});Copy the code

index.vue

<template>

    <div>
        {{count}}
       ...
        <button @click="handleByParam">+30</button>
    </div>
</template>

<script>
    export default {
        ...
        methods: {
            ...
            handleByParam() {
                this.$store.commit({
                    type: 'incrementByParam',
                    count: 30
                });
            },
        }
    }
</script>
Copy the code

** Note: ** If data is manipulated asynchronously in mutations, the component will not be able to change the data immediately after the commit. So, in mutations, it is recommended that you use synchronous methods to manipulate data as much as possible.

Effect: