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把页面转换成图片导出方式(html2canvas导出不全问题)
这篇文章主要介绍了vue把页面转换成图片导出方式(html2canvas导出不全问题),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue style width a href动态拼接问题的解决
这篇文章主要介绍了vue style width a href动态拼接问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue动态删除从数据库倒入列表的某一条方法
今天小编就为大家分享一篇vue动态删除从数据库倒入列表的某一条方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue/React子组件实例暴露方法(TypeScript)
最近几个月都在用TS开发各种项目，框架有涉及到Vue3,React18等，记录一下Vue/React组件暴露出变量/函数的方法的写法，对vue react组件暴露方法相关知识感兴趣的朋友跟随小编一起看看吧
2022-11-11
Vue ECharts饼图实现方法详解
这篇文章主要介绍了在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-12-12
Vue组件的通信方式详解
这篇文章主要介绍的是Vue组件间的通信方式，本文将系统的介绍了几种不使用Vuex，比较实用的组件间的通信方式，希望能帮助到大家
2023-04-04
Vue3进行样式Scoped和Global的设置方法
在 Vue 3 中,组件化开发成为了我们提升前端开发效率的利器,其中,样式的管理也是一个至关重要的部分,在 Vue 中,我们会经常使用两种样式作用域：Scoped 样式和 Global 样式,本文将通过示例代码来介绍Vue3如何进行样式Scoped和Global的设置,需要的朋友可以参考下
2025-01-01
flv.js在vue中的使用方法
flv.js是一个用于在浏览器中解码和播放FLV视频的JavaScript库,它可以将FLV视频流解码并显示在HTML5的video元素中,从而实现在浏览器中直接播放FLV格式的视频文件,本文给大家介绍flv.js在vue中的使用,感兴趣的朋友一起看看吧
2023-11-11
keep-alive组件的作用与原理分析
这篇文章主要介绍了keep-alive组件的作用与原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
使用vue.js开发时一些注意事项
使用vue.js进行项目的开发已经有了一定的时间，在任务的过程中以及和不同的开发使用者交流中，逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项
2016-04-04