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内部函数被调用就会触发。我们可以在某个函数调用前做一些操作,调用后执行某些操作,以及函数中抛出的错误进行操作。

### Vue.js 前端开发面试题汇总整理 以下是关于 Vue.js 的一些常见面试题目及其解答: #### 动态组件的理解 Vue 的动态组件是一种允许开发者根据条件渲染不同组件的功能。它通过 `<component>` 标签配合 `is` 属性实现,可以根据不同的逻辑切换显示的组件[^1]。 ```vue <template> <div> <button @click="currentComponent = 'ComponentA'">Show A</button> <button @click="currentComponent = 'ComponentB'">Show B</button> <component :is="currentComponent"></component> </div> </template> <script> import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA', }; }, }; </script> ``` --- #### Vuex 的核心概念与适用场景 Vuex 是专门为 Vue.js 设计的一个状态管理模式,用于管理复杂的应用程序中的全局状态。其主要组成部分包括 State、Getter、Mutation 和 Action[^2]。 - **State**: 存储应用程序的状态数据。 - **Getter**: 类似于计算属性,用来获取经过处理后的状态值。 - **Mutation**: 提交更改状态的方法,必须是同步操作。 - **Action**: 处理异步逻辑并最终提交 mutation 来变更状态。 - **Module**: 将 store 划分为模块化结构以便更好地管理和扩展。 适用于多页面或多组件间共享状态的情况,比如购物车功能、用户登录状态等。 --- #### Pinia 替代 Vuex 的原因 PiniaVue 官方推荐的新一代状态管理库,相较于 Vuex 更加简洁易用。它的设计理念更贴近现代 JavaScript 特性,支持组合式 API 并减少了样板代码。例如,定义一个简单的 Store 可以这样写: ```javascript import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, }); ``` --- #### 如何拆分组件间的独立状态? 当多个子组件需要维护自己的局部状态时,可以通过 Props/Events 或者 Scoped Stores 实现解耦。如果存在部分公共状态,则可以将其提取至父级组件或单独创建一个 Store 进行统一管理。 例如: - 使用 Prop 向下传递只读的数据; - 使用 Emit 上报事件通知父组件更新某些字段; - 对于复杂的跨层级交互建议引入像 Pinia/Vuex 这样的工具来集中控制业务逻辑流。 --- #### 其他重要知识点补充 除了上述内容外,还有以下几个方面也是常考的知识点: 1. 生命周期钩子函数的作用及时机调用顺序。 2. 自定义指令 Directive 的编写方式以及实际应用场景。 3. 插槽 Slot (默认插槽、具名插槽、作用域插槽) 的区别及使用方法。 4. Vue Router 路由守卫机制详解(导航守卫 beforeRouteEnter/beforeEach 等)。 5. Composition API vs Options API 的对比分析。 ---
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲤余

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值