20240618每日前端---------vue3集成pinia

pinia
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

集成

安装pinia依赖

yarn add pinia
npm install pinia
pnpm i pinia

安装pinia持久化缓存pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
pnpm i pinia-plugin-persistedstate

使用

在main.ts引入

import {createApp} from 'vue';
import App from './App.vue';
import pinia  from "@/stores";

const app = createApp(App);
app.use(pinia).mount("#app");

定义stores

index.ts

import {createPinia} from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default pinia;

modules/user.ts

import { defineStore } from "pinia";
import { UserState } from "@/stores/interface";
import piniaPersistConfig from "@/stores/helper/persist.ts";

export const useUserStore = defineStore({
    id: "dive-yang",
    state: (): UserState => ({
        token: "",
        userInfo: {
            userName:"",
            userId:"",
            userCode:"",
            userAvatar:"",
            userEmail:"",
            userPhone:"",
            userRole:"",
            userStatus:"",
            userCreateTime:"",
        }
    }),
    getters: {},
    actions: {
        // Set Token
        setToken(token: string) {
            this.token = token;
        },
        // Set setUserInfo
        setUserInfo(userInfo: UserState["userInfo"]) {
            this.userInfo = userInfo;
        }
    },
    persist: piniaPersistConfig("dive-yang")
});

interface/index.ts

export interface UserState{
    token:string,
    userInfo:{
        userName:string,
        userId:string,
        userCode:string,
        userAvatar:string,
        userEmail:string,
        userPhone:string,
        userRole:string,
        userStatus:string,
        userCreateTime:string,
    }
}

hepler/persist.ts

import { PersistedStateOptions } from "pinia-plugin-persistedstate";

/**
 * @description pinia 持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @param {Array} paths 需要持久化的 state name
 * @return persist
 * */
const piniaPersistConfig = (key: string, paths?: string[]) => {
  const persist: PersistedStateOptions = {
    key,
    storage: localStorage,
    // storage: sessionStorage,
    paths
  };
  return persist;
};

export default piniaPersistConfig;

vue3使用

index.vue

  import {useUserStore} from "@/stores/modules/user";
  let token = ref('user' + Math.floor(Math.random() * 1000) + 1);
  const userStore = useUserStore();
  let userInfo = userStore.userInfo;
  userInfo.userCode = token.value;
  userStore.setUserInfo(userInfo);

至此，vue3实战集成pinia已完成。