【精品】pinia 基于插件pinia-plugin-persist的 持久化

准备工作

第一步：安装pinia

npm install pinia --save

第二步：新建store目录,创建index.ts

import {
     createPinia } from "pinia"
const store = createPinia()
export default store

第三步：main.ts中使用store

import {
     createApp } from 'vue'
import store from '@/store'

const app = createApp(App)
app.use(store)
app.mount('#app')

第四步：新建user.ts

import {
     defineStore } from "pinia"

export const useUserStore = defineStore({
    
  id:'user',
  state() {
    
    return {
    
      name: '',
      age: 0
    }
  }
})

第五步：在vue页面中使用

<template>
  User：{
   { name }} == {
   { age }}
  <br>
  <button @click="fun">修改值</button>
</template>

<script setup lang="ts"> import {
      useUserStore} from "@/store/module/user" import {
      storeToRefs} from "pinia" const userStore = useUserStore() const {
      name, age} = storeToRefs(userStore) const fun = () => {
       userStore.name = "zhangsan" userStore.age = 18 } </script>

结果

打开页面，单击页面按钮，显示的用户信息发生变化，刷新页面又恢复到原来的样子。

利用插件pinia-plugin-persist持久化

第一步：安装插件pinia-plugin-persist

npm install pinia-plugin-persist --save

第二步：修改store文件夹下的index.ts

import {
     createPinia } from "pinia"
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

export default store

第三步：修改user.ts，为其添加persist

import {
    defineStore} from "pinia"

export const useUserStore = defineStore({
    
    id: "user",
    state: () => {
    
        return {
    
            name: '',
            age: 0
        }
    },
    persist: {
    
        enabled: true,
        strategies: [
            {
    
                key: 'wego_user',
                storage: localStorage
            }
        ]
    }

})

注：在strategies中可以指定对哪些数据进行缓存，比如：

strategies: [
    {
     storage: localStorage, paths: ['token','name'] }
]

测试

运行程序，打开页面单击按钮，数据发生变化，关闭页面再次打开，页面显示的仍然是变化后的数据，此时F12，会看到：