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;

// 组件

复杂使用，封装好后使用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
    }
});


// 组件使用