【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

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

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

2. 在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)

3. 在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
    },
  },
})

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