如何通过突变动态添加状态属性答案

【问题标题】：How to Add State Properties dynamically via Mutations如何通过突变动态添加状态属性
【发布时间】：2019-11-09 16:04:46
【问题描述】：

我想通过突变将属性添加到store.state。非常简单的例子：

// state.js
export default () => ({
    Prop1: '1',
    Prop2: '2'
})

//mutations.js
export default {
    makeProp (state, anotherProp) {
        return state.anotherProp = anotherProp;
    }
}

// State Client
export default () => ({
    Prop1: '1',
    Prop2: '2',
    anotherProp: 'what ever'
})

一切都很好。但令人讨厌的是，它在 Vue-Component 中似乎不再是响应式的了。如果anotherProp 获得新值，则组件不会呈现它。

如果我在 State 中定义了 anotherProp，它是反应式的。我可以想象为什么。我猜 Vue 的反应需要知道它的数据，所以它知道要听哪些变化。

但是我能做什么呢？我真的需要通过突变添加状态。背景是：

我们实施了数据库管理。因此，如果用户创建了一个新数据库，vuex 存储需要动态知道这些。所以现在，我们有一个突变，它为每个数据库创建状态。

我有什么办法解决这个问题吗？我还是不知道：D

【问题讨论】：

【解决方案1】：

这是创建 State 属性的突变，我尝试集成使这个 Prop 对 Vue 反应

更新 --------------------------------------------------------

// mutation.js
import Vue from 'vue'

export default {
    stateUpdate (state, target) {
      Vue.set(state, target.t, target.data);
    },
}

这是我需要的，因为我在 Vuex Store 本身中需要它 mutate 和 set，而不是通过组件。

感谢您的帮助:)

【讨论】：

【解决方案2】：

正如 Lewis 和 vuex mutations rules 所说，商店初始化时似乎所有的前期恶魔都应该存在。

一个简单的解决方案可能是初始化一个包含您想要的所有属性的前期属性。例如：

export default () => ({
  data: {
    Prop1: '1',
    Prop2: '2'
  }
})

这样做你可以使用：

Vue.set(data, 'anotherProp', 'what ever')

或

state.data = { ...state.data, 'anotherProp': 'what ever' }

【讨论】：