Pinia本地持久化存储（在vue3 vite ts中使用）

一、插件安装

npm install pinia-plugin-persistedstate

二、引入插件：main.ts文件

1. 引入写法一

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

// pinia 数据持久化 start -------------------------------------------
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
// pinia 数据持久化 end ---------------------------------------------

// app.use(createPinia())
app.use(router)

app.mount('#app')

2. 引入写法二

// 1.在stores目录下创建index.ts ( stores/index.ts )
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const store = createPinia();
store.use( piniaPluginPersistedstate );
export default store;

// 2.在main.ts中引入
import { createApp } from 'vue'
import store from './stores'  // 引入pinia状态管理库
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')

三、创建store文件

src/stores/userStore.ts

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
  state: () => {
    return {
      token: '' as any
    }
  },
  getters: {
    getToken(): any {
      return this.token
    }
  },
  actions: {
    saveToken(data: any) {
      this.token = data
    }
  },
  // 数据持久化配置 这里是当前所有变量都持久化
  persist: true

  //按需配置数据持久化 这里指定变量num保持持久化
  // persist: {
  //   //默认名称为当前store唯一标识 这里即home
  //   key: 'user',
  //   //默认localStorage 本地储存
  //   //这里建议临时储存sessionStorage 也可写成window.sessionStorage
  //   storage: sessionStorage,
  //   //默认当前store里的所有变量都持久化
  //   paths: ['token']
  // }

  // persist: [
  //   {
  //     paths: ['name'],
  //     storage: localStorage
  //   },
  //   {
  //     paths: ['age'],
  //     storage: sessionStorage
  //   }
  // ]
})

四、使用Pinia（上面已经完成本地数据持久化了）

import { userStore } from '@/stores/userStore'
const userStoreInfo = userStore()

userStoreInfo.saveToken(res.data.token)
userStoreInfo.token