Vue3升级Vuex，使用Pinia鉴权

Pinia.js是新一代的状态管理器，即Vux5.x
特点：
1.完整的ts支持。
2.轻量，压缩后只有1.6kb。
3.去除mutations，只有state，getters，actions
4.actions支持同步和异步。
5.没有模块嵌套，只有store的概念，store之间可以自由使用。
6.无需手动添加store，store一旦常见便会自动添加。

安装

yarn add pinia -S
yarn add pinia-plugin-persist -S 数据持久化工具。

由于理念为更好的支持代码切割，所以按照功能分文件： index.ts、auth.ts、其他功能模块。

index.ts

// 使用pinia
import { createPinia } from "pinia";
import piniaPersist from "pinia-plugin-persist";

const store = createPinia();
store.use(piniaPersist);

export default store;

auth.ts

import { defineStore } from "pinia";

interface AuthState {
    buttons: string[];
}
export const authStore = defineStore({
    id: "auths",
    state: (): AuthState => {
        return {
            buttons: [],
        };
    },
    // 数据持久化-缓存
    persist: {
        enabled: true,
    },
    actions: {
        // 判断按钮是否有权限
        setButtons(payload: string[]) {
            console.log({ payload });
            this.buttons = [...payload];
        },
    },
});

在main.js中引入

import store from "./store";
import piniaPersist from "pinia-plugin-persist";

const app = createApp(App);
store.use(piniaPersist);
app.use(store);

鉴权自定义指令文件，src/directives/index.ts

import { App, nextTick } from "vue"; 

import { authStore } from "@/store/auth";
// 自定义指令，用于判断按钮权限
export default function directive(app: App) {
    app.directive("auth", {
        created: (el, binding) => {
            let userStore: any = authStore();
            const btns: string[] = userStore.buttons || [];
            if (!btns.includes(binding.value)) {
                // 官网说inserted()不保证插入，若还未插入，remove函数无效
                // 这里使用Vue.nextTick() 函数来保证dom已插入
                nextTick(() => el.remove());
            }
        },
    });
    app.directive("bgColor", {
        beforeMount: (el, binding) => {
            el.style.backgroundColor = binding.value;
        },
    });
}

注意⚠️：

import { authStore } from "@/store/auth";
let userStore: any = authStore();
const btns: string[] = userStore.buttons || [];
// 自定义指令，用于判断按钮权限
export default function directive(app: App) {
    app.directive("auth", {
        created: (el, binding) => {
            if (!btns.includes(binding.value)) {
                // 官网说inserted()不保证插入，若还未插入，remove函数无效
                // 这里使用Vue.nextTick() 函数来保证dom已插入
                nextTick(() => el.remove());
            }
        },
    });
    app.directive("bgColor", {
        beforeMount: (el, binding) => {
            el.style.backgroundColor = binding.value;
        },
    });
}

如果在全局饮用注册，会报错getActivePinia was called with no active Pinia. Did you forget to install pinia?

在vue中使用：

import { authStore } from "@/store/auth";
const AuthStore = authStore();
//之前vuex中commit写法改为：
AuthStore.setButtons(availableTags);
//从state中获取数据改为：
return AuthStore.buttons