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

准备工作

第一步：安装pinia

npm install pinia --save

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

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

第三步：main.ts中使用store

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

const app = createApp(App)
app.use(store)
app.mount('#app')
1
2
3
4
5
6

第四步：新建user.ts

import { defineStore } from "pinia"

export const useUserStore = defineStore({
  id:'user',
  state() {
    return {
      name: '',
      age: 0
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11

第五步：在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结果

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

利用插件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
1
2
3
4
5
6
7

第三步：修改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
            }
        ]
    }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

测试

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