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就会执行
总结
以上就是$onAction函数,对于$函数就相当于一个监听器,功能类似与watch当actions内部函数被调用就会触发。我们可以在某个函数调用前做一些操作,调用后执行某些操作,以及函数中抛出的错误进行操作。
到此这篇关于Pinia中action使用方法的文章就介绍到这了,更多相关Pinia中action使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue如何使用vant组件的field组件disabled修改默认样式
这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-05-05详解Vue.js 作用域、slot用法(单个slot、具名slot)
这篇文章主要介绍了Vue.js 作用域、slot用法(单个slot、具名slot),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
最新评论