首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 pinia使用

vue3 pinia使用及持久化注册

2024-10-25 10:34:13 作者：蜡笔大杺

本文介绍了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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！