持久化 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：

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

main.ts:

import { createApp } from 'vue'
import store from './store/index'

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

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

src/store/user.ts：

...
const useDemoStore = defineStore('useUser', () => {
	state:()=>{
      return {
          isLogin:false,
          num:0
      }
   }
}, {
  persist: true  //可以自定义配置存储的地方，这是默认储存
})

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

//demo.vue
import {useUser} from '@/store/user'
const userStore = useUser() //获取store

const fn = ()=>{
  userStore.num++
}

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

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