持久化 pinia 状态

pinia的状态与vuex一样把数据存在内存中，在刷新页面后会清理内存，数据会丢失。

要解决这个问题非常简单，在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、sessionStorage 。

可以搭配 pinia-persistedstate-plugin  插件来实现持久化，原理也是把数据存入localStorage中，只是插件会帮助自动存入与取出，不需要自己去操作localstorage 。（我使用pinia-plugin-persistedstate或者pinia-plugin-persist都无效！）

pinia-persistedstate-plugin

接下来就使用 pinia-persistedstate-plugin 插件实现 pinia 状态的持久化。

1. 安装依赖：

npm i pinia-persistedstate-plugin

1. 引入该插件，在创建 pinia 实例时传入该插件

src/store/index.ts：

1.  
   import { createPinia } from "pinia"
2.  
   import { createPersistedState } from 'pinia-persistedstate-plugin'
3.  
   const pinia = createPinia();
4.  
   pinia.use(createPersistedState())
5.  
   export default pinia

main.ts:

1.  
   import { createApp } from 'vue'
2.  
   import store from './store/index'
3.  
    
4.  
   const app = createApp(App)
5.  
   app.use(store)
6.  
   app.mount('#app')

1. 在需要持久化状态的模块中设置 persist。咱假设 demo 模块需要对状态需要持久化，defineStore 第一个参数定义唯一的模块名，第二个参数传递 setup，其实还有第三个参数，可开启 persist：

src/store/user.ts：

1.  
   ...
2.  
   const useDemoStore = defineStore('useUser', () => {
3.  
   state:()=>{
4.  
   return {
5.  
   isLogin:false,
6.  
   num:0
7.  
   }
8.  
   }
9.  
   }, {
10.  
    persist: true //可以自定义配置存储的地方，这是默认储存
11.  
    })

在需要使用store的页面修改数据的时候，不要使用赋值解构取出，而是直接取出并修改。

1.  
   //demo.vue
2.  
   import {useUser} from '@/store/user'
3.  
   const userStore = useUser() //获取store
4.  
    
5.  
   const fn = ()=>{
6.  
   userStore.num
7.  
   }

插件帮助我们把数据存储到了localStorage 

刷新浏览器后数据也不会重置为0了

这篇好文章是转载于：学新通技术网