安装插件
npm i pinia-plugin-persistedstate
main.js中引入
import { createPinia } from 'pinia'
//引入插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import { createApp } from 'vue'
import App from './App.vue'
const pinia = createPinia()
//pinia使用插件都是用pinia.use()引入
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(pinia)
store中需要持久化的ts文件
例如counter.ts
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
}, {
persist: true,//持久化存储
storage:sessionStorage,//设置成存储成sessionStorage,不设置默认为localStorage
key:'userInfo',//键值
paths:['count'],//只把count持久化
}
)
注意:
当前的整个state,会开启持久化
默认配置是localStorage
插件其他参数
key 设置键值
storage 设置存储方式 storage:sessionStorage
如果只想把需要的数据持久化,可以使用paths:
等等
插件网站
pinia-plugin-persistedstate插件官网