31 vue3 Pinia监听订阅actions

上篇：

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的时候，控制台打印：