Vuex子模块调用子模块的actions或mutations实现方式
更新时间：2023年10月27日 08:41:37 作者：Gik99
这篇文章主要介绍了Vuex子模块调用子模块的actions或mutations实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vuex子模块调用子模块的actions或mutations
项目场景
Vuex中子模块如何调用子模块的actions或mutations
问题描述
因为有的子模块开启了命名空间,其他子模块不能直接访问
如果子模块没有开启命名空间,默认mutations和actions是挂载到全局上 都可以直接调用
这是准备调用的子模块代码 permission.js
const state = {}
const mutations = {}
const actions = {}
}
export default {
namespaced: true, // 开启命名空间
state,
mutations,
actions
}
解决方案
使用 {root:true}
调用的子模块的代码
const actions = {
async lgout(context) {
// 调用 permission 另一子模块下的方法
context.commit('permission/setRoutes', [], { root: true })
}
}
vuex中actions和mutations区别
定义：
在Vuex中，actions和mutations是两个核心概念，用于管理应用程序状态的变化。
Mutations
mutations是用于修改Vuex状态的唯一方法。
它们是同步操作，意味着它们必须是纯函数，以确保状态的可预测性。
这意味着mutations应该只用于同步操作，例如在响应用户事件时更新状态。
它们不应该包含任何异步代码，如API调用。
举个例子，下面的代码演示了如何定义一个名为increment的mutation，用于将state中的count属性增加
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
store.commit('increment') // 调用mutation
Actions
actions用于执行异步操作或包含异步操作的操作序列。
它们可以包含任何异步代码，例如API调用或其他异步操作，但不能直接修改状态。
相反，它们通过commit触发mutations来间接修改状态。
举个例子，下面的代码演示了如何定义一个名为fetchData的action，它会异步获取数据并提交mutation来更新状态：
const store = new Vuex.Store({
state: {
data: null
},
mutations: {
setData(state, data) {
state.data = data
}
},
actions: {
async fetchData({ commit }) {
const response = await fetch('https://api.example.com/data')
const data = await response.json()
commit('setData', data)
}
}
})
store.dispatch('fetchData') // 调用action
总之，mutations和actions有不同的角色和职责。
mutations用于同步状态的修改，actions用于执行异步操作并间接修改状态。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
VUE分为两种路由模式分别是hash（哈希）和history，他们的区别是hash模式不会包含在http请求中，并且不会重新加载页面，而使用history模式的话，如果前端的url和后端发起请求的url不一致的话，会报404错误，所以使用history模式的话我们需要和后端进行配合2022-09-09
这篇文章主要介绍了Vue form表单动态添加组件实战案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
解决vue 给window添加和移除resize事件遇到的坑
这篇文章主要介绍了解决vue 给window添加和移除resize事件遇到的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了使用vue-router切换组件时使组件不销毁问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue3中逻辑复用的相关知识,文中的示例代码简洁易懂,对我们深入了解Vue3有一定的帮助,需要的小伙伴可以参考下2023-12-12
本篇文章主要介绍了vuex中使用对象展开运算符的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue.js监听select2的值改变进行查询方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中的导航守卫使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vue中v-for循环数组,在方法中splice删除数组元素踩坑记录
这篇文章主要介绍了vue中v-for循环数组,在方法中splice删除数组元素踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了vuex实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
最新评论