1. Overview

As a plug-in, Vuex manages and maintains the component state of the whole project.

2. Install vuex

cnpm i --save vuex

3. Use of vuex

github address: https://github.com/MengFangui/Vuex

new Vue({
    el: '#app',
    router: router,
    //Use vuex
    store: store,
    render: h => {
        return h(App)
    }
});

4. Configuration item

(1) Data: the data is saved in the state. The data of the store can only be read and cannot be changed.

(2) Change the data in the store to use mutations. In the component, execute iterations through this.$store.commit

(3) getters: extract the filter method.

(4) actions: handle asynchronous operations, which are triggered by this.$store.dispatch within the component.

mutations for data change and actions for business logic.

The overall configuration is as follows:

//vuex Configuration of
//Be careful Store It's capital
const store = new Vuex.Store({
    //Data saving
    state: {
        count: 0,
        list: [1, 5, 8, 10, 30, 50]
    },
    mutations: {
        increase(state, n = 1) {
            state.count += n;
        },
        decrease(state, n = 1) {
            state.count -= n;
        }
    },
    getters: {
        filteredList: state => {
            return state.list.filter(item => item < 10);
        }
    },
    actions:{
        asyncIncrease(context){
            //Asynchronous 1 s Post execution
            return new Promise(resolve=>{
                setTimeout(()=>{
                    context.commit('increase');
                    //Promise A state of Resolved(Completed)
                    resolve();
                },1000)
            })
        }
    }
});

5. Component code

<template>
    <div>
        <h1>home page</h1>
        {{count}}
        <button @click="handleIncrease">+5</button>
        <button @click="handleDecrease">-5</button>
        
        <!--getters usage-->
        <div>{{list}}</div>
        <!--actions usage-->
        <button @click="handleAsyncIncrease">action +1</button>
        
        <!--router-link Will render as a a How to realize jump with tag 1-->
        <!--router-link Of tag Attribute specifies what label to render to-->
        <!--router-link Of replace Property will not stay history Record, cannot use back key-->
        <!--router-link Of active-class The current element will be automatically set to a name of router-link-active Of class-->
        <router-link to="/about">Jump to about</router-link>
    </div>
</template>
<script>
    export default {
        computed:{
            count(){
                return this.$store.state.count;
            },
            list(){
                return this.$store.getters.filteredList;
            }
        },
        methods:{
            handleIncrease(){
                this.$store.commit('increase',5);
            },
            handleDecrease(){
                this.$store.commit('decrease',5);
            },
            handleAsyncIncrease(){
                this.$store.dispatch('asyncIncrease').then(()=>{
                    console.log(this.$store.state.count)
                });
            }
        }
    }
</script>