最近刚接触 Pinia在项目中引用相关操作,后续考虑到state的持久化存储问题,也引用了大神的推荐的插件结合,《pinia + pinia-plugin-persist持久化存储》,但怎么试都不生成,主要是我项目中之前引用过Pinia,后面在使用pinia-plugin-persist时又创建了一次pinia ,最后看到了这篇文章Vue3 + Pinia 持久化存储,一语惊出梦中人。
** 若不生效,需检查全局是否注册多个 Pinia (全局搜索createPinia)**
再记录下Vue3+Pinia持久化存储
1.安装插件
npm i pinia-plugin-persist --save
2.store/index.js
import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)
// 导出
export default store
3.store/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('storeUser', {
state () {
return {
firstName: '张',
lastName: '三',
accessToken: '123456',
}
},
// 使用该插件,开启数据缓存
persist: {
enabled: true,
strategies: [
{ storage: sessionStorage, paths: ['firstName', 'lastName'] }, // firstName 和 lastName字段用sessionStorage存储
{ storage: localStorage, paths: ['accessToken'] }, // accessToken字段用 localstorage存储
],
},
})
4.main.js挂载
import { createApp } from 'vue'
import store from './store' // 引入store
import router from './router' // 引入router
import App from './App.vue'
createApp(App).use(store).use(router).mount('#app')
5.vue页面调用
<script setup>
import { ref, watch } from 'vue'
import { useUserStore} from '@/store/user.js' // 引用 pinia 数据
const store = useUserStore() // 定义 store 接收
// 修改 accessToken 值
const getIndex = (t) => {
store.accessToken='456789'// 调用 store actions 中方法 修改 变量值
}
</script>