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

最新推荐文章于 2024-03-15 15:01:35 发布

原创

最新推荐文章于 2024-03-15 15:01:35 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vuex #Vuex模块module #Vuex分发dispatch action #Vuex提交commit mutations

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

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)