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

本文介绍了在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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值