Vuex：不同模板(module)之间分发 action 或提交 mutation

最新推荐文章于 2025-05-26 00:00:34 发布

不愿意透露姓名的攻城诗

最新推荐文章于 2025-05-26 00:00:34 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue Vuex Vuex模块module Vuex分发dispatch action Vuex提交commit mutations

本文链接：https://blog.youkuaiyun.com/github_35830425/article/details/88670982

本文介绍了在Vue应用中使用Vuex进行状态管理时，如何在不同模块间分发action和提交mutation。在处理书籍详情页与作者信息交互的场景下，通过创建book.js和author.js两个模块，并在bookDetail.vue组件中进行状态管理。当遇到无法直接调用其他模块的action和mutation时，需要在dispatch或commit时添加{ root: true }参数，以便在全局范围内触发操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex：不同模板(module)之间分发 action 或提交 mutation

场景：卖书的商城，在书籍商品显示详情页的时候需要去获取相关的作者信息，书籍表通过authorId字段关联作者表中的作者。所以考虑方案：在详情页先获取书籍信息，然后通过authorId去查找作者信息。

实现：创建两个状态管理的module：book.js 和 author.js ，然后在详情页：bookDetail.vue中去管理状态。

// author.js
export default {
   
  namespaced: true,
  state: {
   
    author: {
   }
  },
  getters: {
   },
  mutations: {
   
    setAuthor: function (state, author) {
   
      state.author = author
    }
  },
  actions: {
   
    getAuthorName: function ({
    commit }, authorId