526互联

vue3 使用 pinia

发布时间 2023-10-03 22:03:54作者: 灵火

安装 pinia

官网： https://pinia.vuejs.org/

pnpm add pinia

使用

新建 pinia 实例

// @/store/index.ts

import {createPinia} from "pinia";
import useUserStore from "@/store/user.ts";

export useUserStore;

const pinia = createPinia();
export default pinia;

添加自己的 userStore

// @/store/user.ts

// 此处使用 @vueuse，安装的话 `pnpm add @vueuse/core`
// 具体用法请查看 @vueuse 官网 https://vueuse.org/core/useStorage/
import {useStorage} from "@vueuse/core"

const useUserStore = defineStore("user", () => {

    // region <!-- state -->
    const token = useStorage<string>("USER_TOKEN", "");
    const userMenus = useStorage<Array<object> | string | null>("USER_MENUS", null);
    // endregion <!-- END state -->

    const getters = {
        menu: computed(() => userMenus.value),
    }

    return {
        token,
        userMenus,
        ...getters,
    }
})

在 main.ts 里导入

import pinia from "@/store/index.ts"

// const app = createApp(App)...
app.use(pinia)