Vuex

// store/index.js
import rule from "./rule.js";

export default Vuex.createStore({
    // 状态
    state: {
        count: 1,
        order: 1,
    },
    // 状态计算属性
    getters: {
        // 计算state
        doubleCount(state) {
            return state.count * 2;
        },
        // 计算state和getters
        tripleCount(state, getters) {
            return state.count + getters.doubleCount;
        },
        // 返回一个函数，用于外部传参，结果不会缓存
        someCount(state) {
            return function(some) {
                return state.count * some;
            }
        }
    },
    // 状态变更
    mutations: {
        setCount(state, count) {
            state.count = count;
        },
        setOrder(state, payload) {
            state.order = payload.order;
        },
    },
    // 事务处理
    actions: {
        updateCount(context, count) {
            context.commit('setCount', count);
        },
        updateOrder(context, payload) {
            context.commit('setOrder', payload);
        },
    },
    // 子模块
    modules: {
        rule,
    },
    // 严格模式，不是由 mutation 函数引起的状态变更都会抛出错，默认false
    // 不要在发布环境下启用严格模式，以避免性能损失
    strict: false
});

// main.js
import router from "./router/index.js";
import store from "./store/index.js";
import App from "./App.js";

const app = Vue.createApp(App);
app.use(router);
// 作为插件安装
app.use(store);
app.mount("#app");

// store/rule.js
export default {
    // 是否使用命名空间，默认false
    // 
    // 即命名空间配置只是对 getter，mutation，action 起作用。
    namespaced: false,
    state: {
        menu: 1,
    },
    getters: {
        // 计算state
        doubleMenu(state, getters, rootState, rootGetters) {
            return state.menu * 2;
        },
    },
    mutations: {
        setMenu(state, menu) {
            state.menu = menu;
        },
    },
    actions: {
        updateMenu({ state, commit, dispatch, rootState, rootGetters }, menu) {
            // 提交当前模块变更
            commit("setMenu", menu);
            // 提交全局变更
            commit("setCount", menu, { root: true });

            // 提交当前模块事务
            dispatch('otherAction', menu);
            // 提交当全局事务
            dispatch('updateCount', menu, { root: true });
        },
        otherAction() {}
    },
};

export default {
    data() {
        return {
            num: 2,
        };
    },
    computed: {
        // 通过计算属性获取状态
        count() {
            return this.$store.state.count;
        },
        // 三点运算符展开
        ...Vuex.mapState({
            // this.$store.state 简化为参数 state
            count1(state) {
                return state.count * this.num;
            },
            // 不需要this时，使用箭头函数简化
            count2: (state) => state.count,
            // 只对应state时，使用字符串简化
            count3: "count",
        }),
        // 只对应state且名称相同时，使用字符串数组简化
        ...Vuex.mapState(["order"]),
    }
};

export default {
    data() {
        return {
            num: 2,
        };
    },
    computed: {
        menu() {
            return this.$store.state.rule.menu;
        },
        ...Vuex.mapState({
            menu1(state) {
                return state.rule.menu * this.num;
            },
            menu2: (state) => state.rule.menu,
        }),
        // 提取模块前缀，进一步简化
        ...Vuex.mapState("rule", {
            menu1(state) {
                return state.rule.menu * this.num;
            },
            menu2: (state) => state.rule.menu,
            menu3: "menu",
        }),
        ...Vuex.mapState("rule", ["menu"]),
    }
};

export default {
    computed: {
        someCount() {
            // 需要传参的getters
            return this.$store.getters.someCount(4);
        },
        ...Vuex.mapGetters({
            // 只对应getters时，使用字符串简化
            doubleCount: "doubleCount",
        }),
        // 只对应getters且名称相同时，使用字符串数组简化
        ...Vuex.mapGetters(["tripleCount"]),
	}
};

export default {
    computed: {
        doubleMenu() {
            return this.$store.getters["rule/doubleMenu"];
        },
        ...Vuex.mapGetters({
            doubleMenu: "rule/doubleMenu",
        }),
        // 提取模块前缀进行简化
        ...Vuex.mapGetters("rule", {
            doubleMenu: "doubleMenu",
        }),
        ...mapGetters("rule", ['doubleMenu']),
	}
};

export default {
    methods: {
        addCount() {
            // 载荷形式提交
            this.$store.commit("setCount", this.count + 1);
        },
        addOrder() {
            // 对象形式提交
            this.$store.commit({
                type: "setOrder",
                order: this.order + 1,
            });
        },
        // 将 this.setOrder(xx) 映射为 this.$store.commit('setOrder', xx)
        ...Vuex.mapMutations({
            setOrder: "setOrder",
        }),
        // 将 this.setCount(xx) 映射为 this.$store.commit('setCount', xx)
        ...Vuex.mapMutations(["setCount"]),
	}
};

export default {
    methods: {
        addMenu() {
            this.$store.commit("rule/setMenu", this.menu + 1);
        },
        ...Vuex.mapMutations({
            setMenu: "rule/setMenu",
        }),
        // 提取模块前缀进行简化
        ...Vuex.mapMutations(("rule", {
            setMenu: "setMenu",
        }),
        ...Vuex.mapMutations("rule", ["setMenu"]),
    },
};

export default {
    methods: {
        reduceCount() {
            // 载荷形式提交
            this.$store.dispatch("updateCount", this.count - 1);
        },
        reduceOrder() {
            // 对象形式提交
            this.$store.dispatch({
                type: "updateOrder",
                order: this.order - 1,
            });
        },
        // 将 this.updateOrder(xx) 映射为 this.$store.commit('updateOrder', xx)
        ...Vuex.mapActions({
            updateOrder: "updateOrder",
        }),
        // 将 this.updateCount(xx) 映射为 this.$store.dispatch('updateCount', xx)
        ...Vuex.mapActions(["updateCount"]),
	}
};

export default {
    methods: {
        reduceMenu() {
            this.$store.dispatch("rule/updateMenu", this.menu - 1);
        },
        ...Vuex.mapActions({
            updateMenu: "rule/updateMenu",
        }),
        // 提取模块前缀进行简化
        ...Vuex.mapActions(("rule", {
            updateMenu: "updateMenu",
        }),
        ...Vuex.mapActions("rule", ["updateMenu"]),
    },
};

// 注册模块 `myModule`
this.$store.registerModule('myModule', {
  // ...
});

// 注册嵌套模块 `nested/myModule`
this.$store.registerModule(['nested', 'myModule'], {
  // ...
},{ 
    // 当前模块注册前已经存在，保留之前的state
    preserveState: true 
});

// 卸载动态注册的模块
this.$store.unregisterModule('myModule');
this.$store.unregisterModule(['nested', 'myModule']);

// 判断模块是否注册
this.store.hasModule('myModule');
this.store.hasModule(['nested', 'myModule']);