vue3 pinia持久化存储

  我们都知道在vue2里面使用的vuex，在数据改变了之后是不用管的，本身就带持久化，在vue3里面，使用了pinia，改变了数据之后，浏览器刷新是会恢复初始值的，这个时候就需要配置持久化，来管理数据。

1. 首先安装 pinia-plugin-persistedstate 插件

   npm install  pinia-plugin-persistedstate

2. 然后在main.ts或main.js里面进行配置

   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   
   const app = createApp(App)
   
   const pinia=createPinia()
   // 1 引入数据持久化插件
   import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
   // 2 pinia使用数据持久化插件
   pinia.use(piniaPluginPersistedstate)
   
   
   app.use(pinia)
   app.mount('#app')

   3.然后在 store里面的ts文件配置使用

   import { defineStore } from 'pinia'
   import { reactive } from 'vue'
   
   export const useUserStore = defineStore('user', {
       state: () => {
           return {
              user:0
           }
       },
       actions: {
           updateUser() {
             this.user = 1
           }
       },
       getters: {
           infoName(state) {
               return state.user
           },
       },
       persist: true
   })

   4.需要注意的是，pinia-plugin-persistedstate  需要进行配置，不配置的话，默认存储的地方就是 localStorage，可以存储到sessionStorage里面，也可以进行自定义存储

   pinia.use(piniaPluginPersistedstate, {
     key: 'my-app',
     paths: ['user'],
   //storage是存储的地方，可以进行更改，根据项目要求，或者自己喜好进行设置
     storage:localStorage,
   })

   好了，到这里就可以使用 pinia 持久化了，自定义配置有想使用的小伙伴下去自己研究一下哦！