pinia与vuex对比

Vue3 中使用 Vuex的话需要使用Vuex4，并且存在很大缺陷，所以在 Componsition API诞生之后，也就设计了全新的状态管理 Pinia.
1.Pinia对vue2和vue3都支持,尤其是TypeScript的项目
2.没有模块的嵌套结构
3.不需要注入、导入函数、调用它们
4.无需手动添加 store，它的模块默认情况下创建就自动注册的
5.支持 Vue DevTools
6.支持服务端渲染

通常：
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 单独使用，各是各的
/**
 * 登录用户 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: () => ({
    // 当前登录用户的信息
    info: null,
    // 当前登录用户的菜单
    menus: null,
    // 当前登录用户的权限
    authorities: [],
    // 当前登录用户的角色
    roles: []
  }),
  getters: {},
  actions: {
    /**
     * 请求用户信息、权限、角色、菜单
     */
    async fetchUserInfo() {
      // 获取加载的菜单类型，默认加载前台菜单
      let antdvMenuFrontType = 1;
      let sessionFrontType = sessionStorage.getItem(SESSION_KEY_MENU_TYPE);
      if (sessionFrontType) {
        antdvMenuFrontType = parseInt(sessionFrontType);
      }

      // 设置当前store值为session中的值
      let systemStore = useSystemStore();
      systemStore.setMenuFrontType(antdvMenuFrontType);

      // 调用获取用户信息接口
      const result = await getUserInfo(antdvMenuFrontType).catch(() => undefined);
      if (!result) {
        return {};
      }
      // 用户信息
      this.info = result;
      // 用户权限编码集合
      this.authorities = result.authCodes ?? [];
      // 用户角色
      this.roles = result.roles?.map(d => d.roleCode) ?? [];
      // 用户菜单, 过滤掉按钮类型并转为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`
// 它将自动要求模块文件中的所有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
}