Vue3 中使用 Vuex的話需要使用Vuex4，并且存在很大缺陷，所以在 Componsition API誕生之后挚歧，也就設(shè)計(jì)了全新的狀態(tài)管理 Pinia.
1.Pinia對(duì)vue2和vue3都支持,尤其是TypeScript的項(xiàng)目
2.沒(méi)有模塊的嵌套結(jié)構(gòu)
3.不需要注入、導(dǎo)入函數(shù)、調(diào)用它們
4.無(wú)需手動(dòng)添加 store普气，它的模塊默認(rèn)情況下創(chuàng)建就自動(dòng)注冊(cè)的
5.支持 Vue DevTools
6.支持服務(wù)端渲染

通常：
Vuex4 用于 Vue3
Vuex3 用于 Vue2

Vuex：State、Gettes佃延、Mutations(同步)现诀、Actions(異步)
Pinia： State夷磕、Gettes、Actions(同步異步都支持)

npm install pinia
// index.js
import { createPinia } from 'pinia';
export default createPinia();


// user.js 單獨(dú)使用仔沿，各是各的
/**
 * 登錄用戶 store
 */
import { defineStore } from 'pinia';
import { formatMenus, formatTreeData } from 'ele-admin-pro';
import { getUserInfo } from '@/api/layout';
import { SESSION_KEY_MENU_TYPE } from '@/config/setting';
import { useSystemStore } from '@/store/modules/system';

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    // 當(dāng)前登錄用戶的信息
    info: null,
    // 當(dāng)前登錄用戶的菜單
    menus: null,
    // 當(dāng)前登錄用戶的權(quán)限
    authorities: [],
    // 當(dāng)前登錄用戶的角色
    roles: []
  }),
  getters: {},
  actions: {
    /**
     * 請(qǐng)求用戶信息坐桩、權(quán)限、角色封锉、菜單
     */
    async fetchUserInfo() {
      // 獲取加載的菜單類(lèi)型绵跷，默認(rèn)加載前臺(tái)菜單
      let antdvMenuFrontType = 1;
      let sessionFrontType = sessionStorage.getItem(SESSION_KEY_MENU_TYPE);
      if (sessionFrontType) {
        antdvMenuFrontType = parseInt(sessionFrontType);
      }

      // 設(shè)置當(dāng)前store值為session中的值
      let systemStore = useSystemStore();
      systemStore.setMenuFrontType(antdvMenuFrontType);

      // 調(diào)用獲取用戶信息接口
      const result = await getUserInfo(antdvMenuFrontType).catch(() => undefined);
      if (!result) {
        return {};
      }
      // 用戶信息
      this.info = result;
      // 用戶權(quán)限編碼集合
      this.authorities = result.authCodes ?? [];
      // 用戶角色
      this.roles = result.roles?.map(d => d.roleCode) ?? [];
      // 用戶菜單, 過(guò)濾掉按鈕類(lèi)型并轉(zhuǎn)為children形式
      const { menus, homePath } = formatMenus(result.authorities ?? []);
      this.menus = menus;
      return { menus, homePath };
    },
    /**
     * 更新用戶信息
     */
    setInfo(value) {
      this.info = value;
    },
    /**
     * 更新菜單的 badge
     */
    setMenuBadge(path, value, color) {
      this.menus = formatTreeData(this.menus, m => {
        if (path === m.path) {
          return Object.assign({}, m, {
            meta: Object.assign({}, m.meta, {
              badge: value,
              badgeColor: color
            })
          });
        }
        return m;
      });
    }
  }
});

npm install vuex --save// 或者 yarn add vuex

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
// 不需要“import app from”./modules/app`
// 它將自動(dòng)要求模塊文件中的所有vuex模塊
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})
export default store
// getter.js
const getters = {
  sidebar: state => state.app.sidebar,
  token: state => state.user.token,
  roles: state => state.user.roles,
}
export default getters

// setting.js
import defaultSettings from '@/settings'
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  tagsView: tagsView,
  sidebarLogo: sidebarLogo
}
const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}
const actions = {
  changeSetting ({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}