vuex使用（如何安装和全局引用可看我的博客Vue的安装以及相关插件）

简单使用：（有基础直接看最下方，建议直接用下方的方法封装使用）

// store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // Vue.use必须先执行后才能执行new Vuex.store, 否则控制台会报错

const state = {
    num: 0
}

const actions = {
    add(context, value) {
        // context mini版store，value是值
        context.commit('ADD', value); // mutations一般都用大写与actions区分开来
    }
}

// mutations不要写业务逻辑和调用接口
const mutations = {
    ADD(state, value) {
        state.num += value;
    }
}

// getters根据实际需求使用，用于管理state内的数据, 一般处理复杂的数据时会去使用这个配置
const getters = {
    bigNum(state) {
        return state.num * 10
    }
}

const store = new Vuex.Store({
    actions,
    mutations,    
    state,
    getters
});

export default store;

// 组件
<template>
    <div class="aa">
        <span>{{ $store.state.num }}</span>
        <button @click="handleAdd">按钮</button>

        <span>{{ $store.getters.bigNum}}</span>
    </div>
</template>

<script>
    export default {
        name: 'StudentName',
        data () {
            return {
                
            }
        },
        methods: {
            handleAdd () {
                this.$store.dispatch('add', 4);
            }
        }
    }
</script>

复杂使用，封装好后使用mapState和mapGetters和mapActions和使用mapMutations

// store
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const nameOptions = {
    namespaced: true,
    state: {
        name: '张三'
    },
    actions: {},
    mutations: {}
}

const numOptions = {
    namespaced: true,
    state: {
        num: 18,
    },
    actions: {
        add(context, val) {
            context.commit('ADD', val)
        }
    },
    mutations: {
        ADD(state, val) {
            state.num += val
        }
    },
    getters: {
        bigNum(state) {
            return state.num * 10
        }
    }
}

export default new Vuex.Store({
    modules: {
        nameOptions,
        numOptions
    }
});


// 组件使用
<template>
    <div class="aa">
        <span>{{ num }}</span>
        <span>{{ name }}</span>
        <span>{{ bigNum }}</span>
        <button @click="handleAdd(1)">按钮</button>
    </div>
</template>

<script>
    import {mapState, mapActions, mapMutations, mapGetters} from 'vuex';
    export default {
        name: 'StudentName',
        data () {
            return {
                
            }
        },
        computed: {
            ...mapState('nameOptions', ['name']),
            ...mapState('numOptions', ['num']),
            ...mapGetters('numOptions', ['bigNum'])
            // 不使用mapGetters的用法直接在template组件内使用：$store.getters['numOptions/bigNum']
        },  
        methods: {
            // handleAdd () {
            //     this.$store.commit('add', 1)
            // }
            // handleMinus () {
            //     this.$store.commit('minus', 1)
            // }
            // mapState, mapActions, mapMutations一个和多个模块用法都一样，这里只演示一个
            // dispatch使用mapActions， commit使用mapMutations
            ...mapMutations('numOptions', {
                handleAdd: 'ADD',
                // handleMinus: 'MINUS',
            })
            // 如果是直接使用不用map去映射，使用方法为: this.$store.commit('numOptions/ADD', 1)
        }
    }
</script>