31 vue3 Pinia监听订阅actions
上篇:30 vue3 Pinia对state的订阅监听($subscribe)_十一月的萧邦-CSDN博客本篇记录在vue3中如何对actions进行一个监听订阅的操作,这些操作对于在运行时跟踪错误很有用!可以帮助我们更好的发现问题,解决问题1. 创建vue3项目,安装Pinia,配置Pinia,不再详细赘述2. 目录 /store/main.js3.main.js,因为在订阅的时候,有错误异常的
·
上篇:
30 vue3 Pinia对state的订阅监听($subscribe)_十一月的萧邦-CSDN博客
本篇记录在vue3中如何对actions进行一个监听订阅的操作,这些操作对于在运行时跟踪错误很有用!可以帮助我们更好的发现问题,解决问题
1. 创建vue3项目,安装Pinia,配置Pinia,不再详细赘述
2. 目录 /store/main.js
3. main.js,因为在订阅的时候,有错误异常的执行函数,所以,我们这里直接写上一个promise,当isError为false的时候,直接抛出异常
import {defineStore} from "pinia"
const userMainStore = defineStore('mainStore', {
state: () => ({
name: '小明'
}),
actions: {
changeName(name, isError) {
return new Promise((resolve, reject) => {
this.name = name
if (isError) {
resolve(`姓名:${this.name}`)
} else {
reject('error')
}
})
}
,
},
})
export default userMainStore
4. 页面组件调用
<template>
<div>
{{ name }}
</div>
<button @click="changeNameHong">改变名字为小红</button>
<button @click="changeNameMi">改变名字为小米</button>
</template>
<script>
import userMainStore from "@/store/main"
import {computed} from "vue";
export default {
name: "ActionSubcribe",
setup() {
const mainStore = userMainStore();
async function changeNameHong() {
let result = await mainStore.changeName('小红', true)
// console.log(result) //姓名:小红
}
async function changeNameMi() {
try {
let result = await mainStore.changeName('小米', false)
// console.log(result)
} catch (e) {
// console.log(e) // error
}
}
const unsubscribe = mainStore.$onAction((
{
name, //action 函数的名称
store, //store 实例,这里是 mainStore
args, //action 函数参数数组
after, //钩子函数,在action函数执行完成返回或者resolves后执行
onError // 钩子函数,在action函数报错或者rejects后执行
}) => {
console.log('name===>', name)
console.log('args===>', args)
console.log('store===>', store)
after(result => {
console.log('after result===>', result)
})
onError(error => {
console.log('onError error===>', error)
})
},
false //默认是false,设置为true的时候,组件卸载时,订阅依然有效
)
// 同样可以通过调用store.$onAction返回值,即unsubscribe 进行停止订阅
// unsubscribe() // 手动停止订阅
return {
name: computed(() => mainStore.name),
changeNameHong,
changeNameMi
}
}
}
</script>
5. isError为true的时候,控制台打印:
6. isError为false的时候,控制台打印:
更多推荐
已为社区贡献14条内容
所有评论(0)