vue3使用vuex

在vue3中可以使用Vuex也可以使用pinia，下面我们来讲讲如何在vue中使用vuex
首先下载vuex，

安装依赖库

npm intall vuex --save-dev

配置vuex

在main.ts中引用

import store from './vuex/index';
createApp(App).use(router).use(piniaStore).use(store).mount('#app');

vuex的使用

新建vuex文件夹,新建index.ts

import { createStore } from 'vuex';
// vuex持久化插件
// npm i vuex-persistedstate --save
import createPersistedstate from 'vuex-persistedstate';
import user from './modules/user';
export default createStore({
  state: {
    num: 10,
    sum: 10,
    str: '这是store数据',
  },
  // computed
  getters: {
    total(state) {
      return state.num + state.sum;
    },
  },
  // methods
  mutations: {
    changeNum(state, val) {
      state.num = val;
      state.sum = val + 100;
    },
  },
  // 异步
  actions: {
    changebtn() {
      alert('changebtn');
    },
  },
  modules: {
    user,
  },
  // 配置前端持久化插件
  plugins: [
    createPersistedstate({
      key: 'user',
      // 可持续文件的
      paths: ['user'],
    }),
  ],
});

新建modules文件夹，新建user.ts

export default {
  state: { userInfo: 'Admin' },
  mutations: {
    changeAdmin(state, val) {
      state.userInfo = val;
    },
  },
};

使用Vuex数据