【vue3-pinpa】vite pinia-plugin-persistedstate安装使用 vue状态管理工具pinpa，pinia持久化如何使用，如何配置pinia,vue3刷新数据不丢失

pinia(vue3推荐)

1. 首先下载pinia

   	npm i pinia       // "pinia": "^2.0.14"
   

2. 创建pinpa.js

   	//解构pinia中的createPinia用于创建pinia实例
        import { createPinia } from "pinia";
       //实例化pinia
       const store = createPinia();
        export function piniaStore(app) {
        //注册给app
       app.use(pinia)
   }
   

3. 引入到main.js

   // 引入pinia
   import {piniaStore} from "@/plugin/pinia.js"
   piniaStore(app)
   

4. 在stores里的js文件里定义数据

   import { defineStore } from "pinia";
   
   export const userInfo = defineStore("userinfo", {
      id:"userInfo",
     //定义要管理的数据
     state: () => {
       return {
         userid: "1001111",
         username: "张三",
         age: 20,
         address: "北京",
       };
     },
     //要处理的业务逻辑方法
     actions: {
   		fn(val){
   		this.username=val
   		}
   	},
     //通过state处理的计算属性
     getters: {}
   });
   

5. 定义store，及修改store的数据

   <template>
   <div class="index_page">
      {{store.username}}//在页面上可以呈现
   </div>
   <button @click="click">点击改名</button>
   </template>
   
   <script setup>
   import {userInfo} from '@/stores/userInfo.js'
   const store=userInfo()
   const click=()=>{
   	store.fn('李大漂亮')
   }
   </script>
   
   
   

   pinia-plugin-persistedstate

6. 下载pinia-plugin-persistedstate数据持久化

   pnpm : pnpm i pinia-plugin-persistedstate
   npm : npm i pinia-plugin-persistedstate
   yarn : yarn add pinia-plugin-persistedstate
   

7. 在piniajs文件中引入

   
       //解构pinia中的createPinia用于创建pinia实例
       import { createPinia } from "pinia";
       //实例化pinia
       const store = createPinia();
       //引入持久化插件
   	import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
   	//pinia使用
   	pinia.use(piniaPluginPersistedstate)
   
        export function piniaStore(app) {
        //注册给app
       app.use(pinia)
   
   

8. 在stores文件里加上persist：true

   import { defineStore } from "pinia"
   export const useCounterStore = defineStore({
     persist: true,//!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     id: "counter",
     state: () => ({
       home_title: "",
     }),
     getters: {},
     actions: {
       getHomeTitle(val) {
         this.home_title = val
       },
     },
   })
   
   
   

   在本地存储的话会有一个默认的存储名称，那么我们改如何修改呢如何
   改变本地存储的名称和改变存储的位置

   
   //数据持久化
   import { defineStore } from "pinia"
   export const useCounterStore = defineStore({
   ///
     persist: {
       key: "给一个要保存的名称",
       //保存的位置
       storage: window.sessionStorage,//localstorage
     },
    ///
     id: "counter",
     state: () => ({
       home_title: "",
     }),
     getters: {},
     actions: {
       getHomeTitle(val) {
         this.home_title = val
       },
     },
   })
   
   
   

   这样刷新数据就不会丢失了