在Vue.js中,可以通过使用mapActions
辅助函数将函数作为值赋给处于Vuex状态的对象的属性。
首先,在Vue组件中引入mapActions
辅助函数:
import { mapActions } from 'vuex';
然后,在组件的methods
中定义一个函数,并使用mapActions
将其映射为Vuex的action:
methods: {
...mapActions(['myAction']),
myFunction() {
// 函数的具体实现逻辑
}
}
接下来,在组件的模板中,可以直接调用myAction
来触发该函数:
<button @click="myAction">触发函数</button>
在Vuex的store中,定义一个action来调用该函数,并将其作为值赋给状态对象的属性:
const actions = {
myAction({ commit }) {
// 调用组件中定义的函数
this.myFunction();
// 其他逻辑处理
}
};
最后,在Vuex的state中定义一个对象属性,并将该action赋值给该属性:
const state = {
myObject: {
myProperty: myAction
}
};
这样,就可以通过调用myObject.myProperty
来触发组件中定义的函数,并在Vuex中管理该函数的状态。
领取专属 10元无门槛券
手把手带您无忧上云