pinia 状态管理

安装

npm install pinia
npm install pinia-plugin-persist // 安装持久化 防止数据刷新重置

创建文件 index.ts

import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persist'


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

export default pinia;

创建文件 GlobalStore.ts

import { defineStore } from 'pinia';
interface GlobalState {
    token: string,
    userInfo: any
}

export const GlobalStore = defineStore({
    id: 'GlobalState',
    state: (): GlobalState => ({
        token: '',
        userInfo: {}
    }),
    getters: {},
    actions: {
        setToken(token: string) {
            this.token = token;
        },
        setUserIngo(userInfo: any) {
            this.userInfo = userInfo;
        }
    },
    // 持久化
    persist: {
        enabled: true,
        strategies: [
            {
                key: 'GlobalState',
                storage: localStorage,
            }
        ]
    }
});

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import store from "@/store";

createApp(App).use(router).use(store).mount('#app')

使用

import { GlobalStore } from "@/store/model/GlobalStore";
const global = GlobalStore();
global.setToken("123");
console.log(global.token)