Pinia中action使用方法详解

 更新时间:2023年04月03日 08:50:40   作者:大鲤余  
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,下面这篇文章主要给大家介绍了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 This$Store总结

    详解Vue This$Store总结

    这篇文章主要介绍了详解Vue This$Store总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue项目前端加前缀(包括页面及静态资源)的操作方法

    vue项目前端加前缀(包括页面及静态资源)的操作方法

    这篇文章主要介绍了vue项目前端加前缀(包括页面及静态资源)的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    本篇文章主要介绍了基于vue监听滚动事件实现锚点链接平滑滚动的方法,非常具有实用价值,有兴趣的可以了解一下
    2018-01-01
  • ant design pro中可控的筛选和排序实例

    ant design pro中可控的筛选和排序实例

    这篇文章主要介绍了ant design pro中可控的筛选和排序实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3+vite自定义封装vue组件发布到npm包的全过程

    vue3+vite自定义封装vue组件发布到npm包的全过程

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue如何自定义按钮单选和多选

    vue如何自定义按钮单选和多选

    这篇文章主要介绍了vue如何自定义按钮单选和多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • elementUI table表格动态合并的示例代码

    elementUI table表格动态合并的示例代码

    这篇文章主要介绍了elementUI table表格动态合并的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue项目内存溢出问题及解决方案

    vue项目内存溢出问题及解决方案

    这篇文章主要介绍了vue项目内存溢出问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue终极性能优化方案(解决首页加载慢问题)

    vue终极性能优化方案(解决首页加载慢问题)

    最近在做项目中前端采用Vue技术,发现首页加载速度非常之慢,下面这篇文章主要给大家介绍了关于vue终极性能优化方案,主要解决首页加载慢问题,需要的朋友可以参考下
    2022-02-02
  • Vue中使用provide和inject实例对比分析

    Vue中使用provide和inject实例对比分析

    这篇文章主要为大家介绍了Vue中使用provide和inject实例对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08

最新评论