vue3+ts+vite中vuex的初体验

前言

vuex主要用于做状态管理，之前呢不太了解vuex的同学，可以移步 vuex官方文档，这里主要简单介绍下 vue3.x + vuex4.x + ts + 组合式API 的用法，具体如下：

操作步骤

第一步：安装vuex

npm install vuex@next --save  ||  yarn add vuex@next --save  //@next：最新版本

第二步：创建store

创建一个Vuex的存储模块，你可以在项目的任何位置创建一个 store 文件夹，并在其中创建一个index.ts文件。这个文件将成为你的Vuex存储模块的入口。

第三步：在main.ts 中关联store

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'

const app = createApp(App)
app.use(store);
app.mount('#app')

第四步：配置store，处理请求

这里用createStore函数创建一个store对象，store中包含store对象，mutations，actions，getters，mutations，他们之间的关系如最后图解。

import { createStore } from 'vuex';
import { getAllCardList, IList } from "@/api/card";  //接口

// 定义状态的类型
interface State {
  allDataCard: IList[];
}

// 创建一个新的Vuex模块
const store = createStore<State>({
  state() {
    return {
      allDataCard: []   //卡片数据
    };
  },

  mutations: {
    setCardData(state, payload) {
      state.allDataCard = payload
    }
  },
  
  actions: {
    async initializeCard(context) {
      try {
        let {
          data: { dataCard },
        } = await getAllCardList();
        context.commit("setCardData", dataCard);
      } catch (error) {
        console.log(error);
      }

    }
  },
  getters: {
    // 这里定义你的计算属性方法
  },
});

export default store;

第五步：在组件中分发action

分发action还是调用 dispatch 函数。和之前的vue2中用法相同。

import { onMounted } from "vue";
import { Store, useStore } from "vuex";
onMounted(() => {
  const store: Store<any> = useStore();
  store.dispatch("initializeCard");
});

第六步：在其他组件中获取state

由于setup中不能使用this，可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API 访问 this.$store 是等效的。

import { Store, useStore } from "vuex";
const store: Store<any> = useStore();
let data = store.state.allDataCard;

图解