vue3 中vuex状态管理

vue3中的vuex 总体和vue2的用法是一样的，只不过现在使用收拾直接在setup 函数中使用并返回了。
下边看看示例

首先我们先创建几个页面 一个是store 文件夹 ，一个是索要演示的页面。

store文件夹 index

import { createStore } from "vuex";
export default createStore({
  state: {
    // 基础数据
    num1: 1,
    num2: 3,
  },
  getters: {
    dobule1(state) {
      console.log(state, "计算属性dobule1，获取基础state");
      return state.num1 * 2;
    },
    dobule2(state) {
      console.log(state, "计算属性dobule2，获取基础state");
      return state.num2 * 2;
    },
  },
  mutations: {
    // 同步方法
    changeNum1(state, payload) {
      console.log(state, payload, "changeNum1");
      state.num1 = payload;
    },
    changeNum2(state, payload) {
      console.log(state, payload, "changeNum2");
      state.num2 = payload;
    },
  },
  actions: {
    // 异步方法
    timeCunm1({ commit, state }) {
      console.log(commit, state, "timeCunm1异步获取，查看");
      setTimeout(() => {
        commit("changeNum1", 44);
      }, 2000);
    },
    timeCunm2({ commit, state }) {
      console.log(commit, state, "timeCunm2异步获取，查看");
      setTimeout(() => {
        commit("changeNum2", 55);
      }, 2000);
    },
  },
  modules: {},
});

需要的页面