pinia的基本使用，以及对state的订阅监听（$subscribe）

本文主要是介绍pinia的基本使用，以及对state的订阅监听（$subscribe），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

pinia的优点：

我们可以定义任意数量的store，因为其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。

如何创建store：

用 pinia 的 defineStore()方法，来创建一个store如何创建store：调用pinia的defineStore()函数即可，该函数接收两个参数：name：一个字符串，必传，该store的唯一idoptions：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等

my-test.ts

import { defineStore } from 'pinia'const InitUserInfo: UserInfo = {name: '梨花',age: 25,sex: '男'
}// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {// 添加state，state接收的是一个箭头函数返回的值，state不能接收一个对象state: () => ({token: 'main_token',userInfo: { ...InitUserInfo }}),/* 添加getters，接收一个对象，该对象里面是各种方法，你可以把它想象成Vue中的计算属性，它的作用就是返回一个结果，getters也是会被缓存的，在getters中的，各个方法之间相互调用采用this关键字即可*/getters: {// 定义一个getAddAge()方法，该方法默认接收一个state参数(即：上面的那个state)getAddAge(state): number {return state.userInfo.age + 1},/*调用其他getters中的方法（在getter中如何使用this）一般情况下，getter仅仅依赖于state，但是有时候也会依赖其他getter，所以呢，如果getter定义为【非箭头函数】，就可以【通过this拿到整个store实例】因为，箭头函数没有自己的this绑定，而是继承了外部的this绑定，所以箭头函数中无法使用this*/getNameAge(state): string {console.log('getters中的this=', this)return state.userInfo.name + '哈哈' + this.getAddAge},/*getter可以通过，返回一个函数xxx来接收参数，这个函数xxx的返回值也就是此getter最终的值在执行此操作时，getter 不再缓存，它们只是调用的函数在`.vue`文件中使用的时候：<h2>getter中接收参数: {{ plusAgeBy(100) }}</h2>*/plusAgeBy(state) {return (moreNum: number) => {console.log('传递给getter的参数是=', moreNum)return state.userInfo.age + moreNum}}},/*添加actions，属性值是一个对象，该对象里面是各种方法，包括同步、异步方法特殊之处：actions中的方法内部的this指向的是当前store，即：在`defineStore`中，state对象中的属性，会被绑定到this上，可以通过this.name来访问和修改name属性，这里state对象中定义了name、age、sex属性，因此可以通过this.name、this.age、this.sex 来访问和修改这些属性*/actions: {saveName(name: string) {this.userInfo.name = name},changeToken(newToken: string, isFlag: boolean){return new Promise((resolve, reject) => {this.token = newTokenif(isFlag){resolve(`token：${this.token}`)} else {reject('error')}})}}
})

store / index.ts

// 引入`createPinia()`函数，创建Pinia实例
import { createPinia } from 'pinia'//#region 从`pinia-plugin-persistedstate`包中引入'createPersistedState()'函数
/* 这个函数是一个插件，这样安装：`npm i pinia-plugin-persistedstate`用于在Pinia中实现状态的持久化存储，也就是说，即使在应用重新加载或关闭后，应用的状态仍然可以保存和恢复
*/
//#endregion
import { createPersistedState } from 'pinia-plugin-persistedstate'// 创建一个Pinia应用实例，并将其赋值给store变量
const store = createPinia()// 将，引入的持久化状态插件，应用到`store`上，这样就能让`store`中的状态可以进行持久化存储
store.use(createPersistedState())// 将store对象导出，使其可以在其他模块中使用
export { store }// 导出 ./modules/my-test 模块中的所有内容，以便其他模块可以直接导入并使用这些内容
export * from './modules/my-test'// 将store对象，作为默认导出，以便在其他模块中可以使用 import store from './store' 的方式导入
export default store

Pinia对state的订阅监听（$subscribe）

Pinia 对 store数据进行的订阅监听，
更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe

app.js

import {defineStore} from "pinia"
const appStore = defineStore('appStore', {state: () => ({baseUrl: 'https://www.baidu.com/'}),actions: {changeState(params) {// console.log('接收到的参数===>', params)this.baseUrl = params}}
})
export default appStore

.vue文件

<template><div> {{ baseUrl }} </div><div v-show="isShow"> 该我出现了 </div><button @click="changeData"> 通过actions改变数据 </button>
</template><script setup>import {ref} from "vue"import {storeToRefs} from "pinia"import appStore from "@/store/app"const store = appStore()const { baseUrl } = storeToRefs(store)const afterChangeUrl = 'https://www.taobao.com/'let isShow = ref(false)const changeData() {store.changeState(afterChangeUrl)}const subscribe = store.$subscribe((mutation, state) => {/*mutation主要包含三个属性值：events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据storeId：是当前store的idtype：用于记录这次数据变化是通过什么途径，主要有三个分别是direct：通过 action 变化的patch object：通过 $patch 传递对象的方式改变的patch function：通过 $patch 传递函数的方式改变的*/// 我们就可以在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的console.log(mutation)console.log(state.baseUrl)if (state.baseUrl === afterChangeUrl) isShow.value = trueelse isShow.value = false},/*第二个参数options对象，是各种配置参数detached：布尔值，默认false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除；detached值为true时，即使所在组件被卸载，订阅依然在生效。参数还有immediate，deep，flush等等参数 和vue3 watch的参数是一样的，多的就不介绍了，用到再看文档吧*/{ detached: false })// 停止订阅subscribe()  //调用上方声明的变量值，示例（subscribe），即可以停止订阅
</script>

Pinia对 action 的订阅监听（$onAction）

与之配合使用的是上面的my-test.ts

.vue文件


<script setup lang="ts">
import { storeToRefs } from 'pinia'
import myTest from '@/store/modules/my-test'const store = myTest()
const { token } = storeToRefs(store)console.log(`未改变之前的token=${token.value}`)// 对actions中的方法进行监听订阅
// @ts-ignore
const unsubscribe = store.$onAction(/*** 传入一个字符串参数，指定要订阅的actions中的方法名称* 如果不传入字符串参数，$onAction方法将会订阅监听actions中所有的方法*/({name, // myTest.ts这个store中 action函数的名称store, // store实例，这里是myTest.ts这个storeargs, // action函数参数数组after, // 钩子函数，在action函数执行返回，或者resolve后执行onError // 钩子函数，在action函数报错，或者reject后执行}) => {console.log('name=', name) // name= changeTokconsole.log('store=', store)console.log('args=', args) // ['米-token', false]after(result => {console.log('after-result=', result) // after-result= token：米-token})onError(error => {console.log('onError-error=', error) // onError-error= error})},false // 默认是false，设置为true的时候，组件卸载时，订阅依然有效
)
// 同样可以调用store.$onAction返回值，即unsubscribe，进行停止订阅
// unsubscribe() // 手动停止订阅async function changeTolenMi() {try {let result = await store.changeToken('米-token', true) // $onAction-成功了= token：米-tokenconsole.log('$onAction-成功了=', result)} catch (e) {console.log('$onAction-失败了=', e)  // $onAction-失败了= error}
}
</script><template><button @click="changeTolenMi">订阅action</button>
</template>