vue3 pinia使用及持久化注册

更新时间：2024年10月25日 10:34:12 作者：蜡笔大杺

本文介绍了Pinia的使用方法及如何实现状态持久化存储,首先,介绍了Pinia的安装和在main.ts中的挂载,介绍了getters和actions的使用方法,最后,详细说明了如何通过Pinia-plugin-persistedstate插件实现Pinia状态的持久化处理,包括插件的安装、配置和在main.ts文件中的注册

pinia使用

pinia官网地址

https://pinia.web3doc.top/

0.安装pinia

npm install pinia
# 或者使用 yarn 
yarn add pinia
# 或者使用 pnpm
pnpm install pinia

1.pinia挂载

在main.ts，引入pinia,进行挂载(不错pinia持久化存储这挂载即可,需要则使用5.3的方法挂载)

//main.ts
import { createApp } from 'vue'
// 导入pinia
import { createPinia } from "pinia";
const pinia = createPinia();
// 挂载
createApp(App).use(pinia).mount('#app')

2 封装store

首先,在项目src目录下新建store文件夹，在文件夹里创建modules文件夹用来存放各种store，然后在modules目录下新建单个.ts文件，实现不同的store
提示:目录结构如下,index.ts是我封装的持久化存储,参考5.2

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        wxpayInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
});

2.1 使用pinia

2.1.1 普通

//xxx.vue
<template>
  <div>name:{{store.name}}</div>
  <div>age:{{store.age}}</div>
</template>
<script lang="ts" setup>
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
</script>

2.1.2 解构取值

//xxx.vue
<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
</template>
<script lang="ts" setup>
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
// 使用解构取值
const { name, age } = store;
</script>

2.1.3 响应式赋值(推荐)

原因:父组件A中修改了值,子组件B中并不会改变,使用场景下,我们需要应用响应式

调用pinia提供的storeToRefs(相当于ref,需要加.value)方法,实现响应式的效果,使用之后,在script调用变量和方法需要加 .value,

storeToRefs 只会解构出 state 和 getters，而不会解构出 actions。saveName 是一个 action，所以不能通过 storeToRefs 来获取。

//xxx.vue
<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
</template>
<script setup lang="ts">
import {storeToRefs} from 'pinia'
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
const { name, age} = storeToRefs(store);
</script>

2.2. 修改state中的数据

2.2.1 修改单个值

<template>
  <div>name:{{name}}</div>
  <div>age:{{age}}</div>
  <Child></Child>
  <button @click="onEditNameBtn">修改name</button>
</template>
<script lang="ts" setup>
import {storeToRefs} from 'pinia'
import { wxpayStore } from "@/store/modules/wxpay";
const store = wxpayStore ();
const { name, age} = storeToRefs(store);
function onEditNameBtn(){
	name.value="xxxx"
}
</script>

2.2.2 修改多个值

使用store的$patch方法

//xxx.vue
<button @click="onEditBtn">批量修改数据</button>
// 法一
const patchStore = () => {
  store.$patch({
    name: "xx",
    age: 10
  });
};
// 法二（推荐）
const onEditBtn= () => {
  store.$patch((state) => {
    state.name='xx'
    state.age = 11
  })
};

2.3.1 重置state

有时我们修改了多次state里的值，但是在某一步我们想要回到初始值，pinia提供了对应的方法

// xxx.vue
<button @click="reset">重置</button>
function reset(){
	store.$reset()
}

3. getters

getters属性值是一个对象，该对象里面是各种各样的方法。可以把getter想象成Vue中的计算属性，它的作用就是返回一个新的结果，那么它也是会被缓存的，就和computed一样。同vuex中的getters基本一致。

3.1 getters使用及调用store中的属性和函数的方法

当前getters调用store中的其他属性或者方法

在getters中getter相互调用采用this关键字即可

wxpay.ts
getters: {
	//state:通过state我们可以调取state中的值并进行基础数据操作，然后该方法返回的是一个新的数据。
    getAddAge: (state) => {
      // 返回state中age值，并+1
      return state.age + 1;
    },
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },

3.2 组件中调用

<p>getters:{{getNameAndAge}}</p>
//解构调用
const store = wxpayStore ();
const { name, age,getNameAndAge} = storeToRefs(store);

3.3 组件中调用时,getters方法中带参数

//wxpay.ts
getters: {
    getAddParamsAge: (state) => {
      return (params:number)=>state.age + 1 + params;
    },
  },

// xxx.vue
<p>getters+Params:{{store.getAddParamsAge(50)}}</p>

4. actions使用

介绍:
state和getters属性都主要是数据层面的，并没有具体的业务逻辑代码，它们两个就和我们组件代码中的data数据和computed计算属性一样。那么，如果有业务代码的话，最好就是写在actions属性里面，该属性就和我们组件代码中的methods相似，用来放置一些处理业务逻辑的方法。
actions属性值同样是一个对象，该对象里面也是存储的各种各样的方法，包括同步方法和异步方法。

4.1 解构调用及普通调用

storeToRefs 只会解构出 state 和 getters，而不会解构出 actions。saveName 是一个 action，所以不能通过 storeToRefs 来获取。

//xxx.vue
<button @click="store.saveName('测试')">调用action中的方法</button>
//结构调用方法
<button @click="saveName('测试')">调用action中的方法</button>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { wxpayStore } from '@/store/modules/wxpay';
// 获取 store 实例
const store = wxpayStore();
// 使用 storeToRefs 解构出响应式引用
const { clientShows, getClientShow } = storeToRefs(store);
// 直接引用 actions
const { saveName } = store;
// 定义一个方法来编辑名字
function onEditNameBtn() {
  saveName("xxxx");
}
</script>

5. Pinia-plugin-persistedstate 插件做持久化Pinia状态处理

pinia-plugin-persistedstate 旨在通过一致的 API 为每个人和每个项目中的 Pinia Store 提供持久化存储。如果你希望保存一个完整的 Store，或者需要细粒化配置 storage 和序列化的方式，该插件都为你提供了相应的功能，并且可以在你想要持久化的 Store 上使用相同的配置。这意味着，通过此插件，你可以将某些状态数据保存在浏览器的localStorage或sessionStorage中，从而确保在页面刷新或浏览器重启后，这些数据仍能被恢复和保持。

官方文档地址

https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html

当使用 { persist: true } 后，以下是基本的默认设置：

存储介质 (storage): localStorage。这是默认的存储位置，用于持久化状态。

存储键名 (key): store.id。这是默认的键名，用于在存储介质中引用数据。id 是你定义 store 时提供的唯一标识符。

序列化/反序列化方法 (serializer): 默认使用 JSON.stringify 和 JSON.parse 方法。这些方法用于将状态转换为字符串以便存储，并在读取时将其转换回 JavaScript 对象。

持久化状态路径 (paths): undefined。这意味着整个 store 的状态将被持久化，除非你明确指定哪些路径应该被持久化。

调试模式 (debug): false。默认情况下，调试模式是关闭的，错误不会输出到控制台。

在恢复之前和之后的钩子 (beforeRestore 和 afterRestore): undefined。默认情况下，不会执行任何在恢复数据之前或之后的操作。

5.1 安装插件

npm instal pinia-plugin-persistedstate
pnpm install pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

5.2 添加

之前目录下的index.ts文件的作用

//src/store/index.ts
import type { App } from 'vue';
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const store = createPinia();
store.use(piniaPluginPersistedstate);
export function setupStore(app: App<Element>) {
    app.use(store);
}
export { store };

5.3 main.ts文件注册store(重要)

import { setupStore } from '@/store';
const app = createApp(App)
setupStore(app);

其余store 模块文件正常构造即可

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        roleInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
  persist: {
//key: 类型：string, 默认值：store.$id, 用于引用 storage 中的数据的键名。随便起,不重复即可
    key: 'wxpay-xxx-xx',
//storage: 类型：StorageLike, 默认值：localStorage, 指定数据持久化的存储介质。必须具有 getItem 和 setItem 方法。
    storage: sessionStorage,
//paths: 类型：string[], 默认值：undefined, 指定 state 中哪些数据需要被持久化。空数组表示不持久化任何状态，undefined 或 null 表示持久化整个 state。
    paths: ['name', 'age'],
//serializer: 类型：Serializer, 默认值：JSON.stringify/JSON.parse, 用于指定持久化时所使用的序列化方法和恢复 Store 时的反序列化方法。
    serializer: {
      serialize: (state) => JSON.stringify(state),
      deserialize: (data) => JSON.parse(data),
    },
//beforeRestore: 类型：(context: PiniaPluginContext) => void, 默认值：undefined,在从 storage 中恢复数据之前触发的 hook。 
    beforeRestore: (context) => {
      // 在恢复数据之前执行操作
    },
//afterRestore: 类型：(context: PiniaPluginContext) => void, 默认值：undefined, 在从 storage 中恢复数据之后触发的 hook。
    afterRestore: (context) => {
  		// 在恢复数据之后执行操作
    },
//debug: 类型：boolean, 默认值：false, 当设置为 true 时，会输出持久化/恢复 Store 时可能发生的任何错误。
    debug: true,
  },
});

5.4 简化配置:

persist: true//开启持久化配置

// src/store/modules/wxpay.ts
import { defineStore } from 'pinia';
interface wxpayState {
     wxpayInfo: any[];
     name: string,
     age: number,
}
// 第一个参数是应用程序中 store 的唯一 id
export const wxpayStore = defineStore('wxpay', {
    state: (): wxpayState => ({
        roleInfo: [],
        name: "测试",
        age: 22,
    }),
    getters: {
        getwxpayInfo(): any[] {
             return this.wxpayInfo;
         },
    },
    actions: {
        async getwxpayInfoFromServer() {
         const wxpayInfo = await getWxList({
             page: 1,
             pageSize: 1000,
         });
         this.wxpayInfo = wxpayInfo.data.data;
         },
	   saveName(name: string) {
      	// 修改state中的name
      	this.name = name;
   	 },
    },
 	persist: true
 });

到此这篇关于vue3 pinia详细使用持久化注册的文章就介绍到这了,更多相关vue3 pinia使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

一文详解Vue3的watch是如何实现监听的
watch这个API大家都很熟悉,今天这篇文章小编来带你搞清楚Vue3的watch是如何实现对响应式数据进行监听的,希望对大家有一定的帮助
2024-11-11
Vue中ref、computed与reactive使用频率现象分析(示例详解)
这篇文章主要分析了Vue中的ref、computed和reactive三个响应式API的使用频率和优势,ref适合处理简单数据类型的响应式需求,感兴趣的朋友跟随小编一起看看吧
2024-11-11
如何使用yarn创建vite项目+vue3
这篇文章主要介绍了如何使用yarn创建vite项目+vue3,详细介绍了使用vite创建vue3过程,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
Vue中render方法的使用详解
这篇文章主要为大家详细介绍了Vue中render方法的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
Vue.js上传图片到阿里云OSS存储的方法示例
这篇文章主要介绍了Vue.js上传图片到阿里云OSS存储的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue3中如何使用dayjs
这篇文章主要介绍了vue3中如何使用dayjs问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue中如何给静态资源增加路由前缀
这篇文章主要介绍了vue中如何给静态资源增加路由前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
你知道Vue中神奇的$set是如何实现的吗?
在日常开发中，$set的也是一个非常实用的API。但是我们知其然更要知其所以然，接下来就跟随小编一起看一下Vue中的$set是如何实现的吧
2022-12-12
VUE+elementui面包屑实现动态路由详解
今天小编就为大家分享一篇VUE+elementui面包屑实现动态路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
在vue中实现简单页面逆传值的方法
vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性
2017-11-11