Vuex非mutation场景修改action加载状态触发报错的解决方案咨询

问题根因 #

你当前的克隆逻辑是浅拷贝，仅仅是把Vuex存储的modal.actions数组中每个对象的引用复制到了本地this.actions数组中。后续你修改本地数组中action的loading属性时，本质上还是在修改Vuex store中的原始对象，因此会触发「禁止在mutation外修改Vuex状态」的报错。

最优解决方案（完全符合你要求的极简写法） #

直接把从Vuex拿到的action配置做一次全量深拷贝生成独立的本地对象，彻底切断和store中原始对象的引用关联即可，代码修改如下：

@Watch('modal')
onModalChanged(modal: ModalData) {
    this.actions = []
    if (modal && modal.actions) {
        // 遍历生成全新的本地action对象，和store中的原始对象无引用关系
        this.actions = modal.actions.map(originAction => ({
            // 拷贝原始action的所有属性
            ...originAction,
            // 初始化loading默认值
            loading: false
        }))
    }
}

修改完成后，你模板中遍历的是本地独立的actions数组，@click回调拿到的也是本地的action对象，直接用action.loading = true修改状态完全不会触发Vuex的报错，不需要调整你原本的回调写法。

备选方案（不拷贝对象的实现） #

如果不想做对象拷贝，也可以在组件本地维护一个loading状态映射表：

• 给每个action配置加唯一的key/id属性
• 本地声明变量actionLoading: Record<string, boolean> = {}
• 点击时修改this.actionLoading[action.id] = true
• 模板中按钮的loading属性绑定actionLoading[action.id] ?? false即可

内容的提问来源于stack exchange，提问作者LEBBER