Pinia中action如何使用

这篇文章主要介绍“Pinia中action如何使用”，在日常操作中，相信很多人在Pinia中action如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Pinia中action如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

actions的使用

动作相当于组件中的方法。它们可以使用actionsin 属性进行定义。

并且在pinia中的action既可以有同步函数也可以有异步函数。

在actions中可以通过this访问该仓库所有实例

export const useUsers = defineStore('users',{state:()=>{userData:null},actions:{async registerUser(login,password){...this.userData = 1}}})

在setup中可以直接使用actions中的函数，pinia会自动推断

<script setup>import { useUsers } from '...'const store = useUsers()store.registerUser()//可以直接调用</script>

订阅$onAction

订阅操作默认情况下绑定到添加他的组件。这就意味着当组件卸载，订阅会自动被删除，但如果第二个参数传递为true则会将该订阅与组件分离。（即组件卸载该订阅依然存在）

$onAction的基本使用

//新建一个测试仓库import { defineStore } from 'pinia'export const testStore = defineStore('test', {    state() {        return {            count:1        }    },    actions: {        testOnAction(id) {            this.count++            console.log(this.count)            return Promise.resolve('这是testOnAction返回的值')        },        testOnAction2(...args) {            console.log(...args)            return Promise.reject('这是testOnAction222错误返回的值')        }    }})//在setup的语法糖里import { testStore } from '../../pinia/modules/test'const myTestStore = testStore()store.$onAction(({  name,  store,  args,  after,  onError})=>{if(name==='testOnAction'){after((reject)=>{//这里可以执行一些操作})}//onError钩子类似一个错误级中间件，当函数抛出promise的失败状态就会调用  onError((error)=>{    console.log(error)  })})store.testOnAction(1)store.testOnAction2(1,2,3,45)

详解$onAction中的参数

({ name,store, args,after, onError }）

$onAction函数接受一个回调函数，该回调函数内部的代码会先于actions函数调用前执行，以下是$onAction中回调函数的参数介绍。

name当该仓库中的某个actions函数被调用，name是被调用函数的名字。

store是当前仓库实例,就是myTestStore

args是actions中某个被调用函数接受的实参，是个数组类型

after是个钩子函数，内部接受要给回调函数，该回调函数接受一个参数result，当actions中的函数返回了一个promise成功的返回值，result可以接受到，如果actions里的函数没有返回值则result则为undefined。after钩子函数会在actions中的函数被调用后执行

onError是个钩子函数，如果做过服务端的小伙伴肯定知道错误级中间件，onError同样接受一个回调函数，该回调函数接受一个error参数，该参数是actions内部函数中返回promise失败传的参数。如果actions内部函数返回了promise失败状态onError就会执行

到此，关于“Pinia中action如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！