vuex 突变不会更新 DOM

Question

我正在基于一个对象呈现一个列表。我在突变的帮助下向这个对象添加了新元素。当我将 this.$store.state.myObject 记录到控制台时，我可以看到它正在更新。但是，我的列表没有更新。

实际上，我很幸运，我通过在我的突变中添加下面的代码行来解决这个问题。 （我发现这可以帮助 DOM 更新。）

但我想知道这是否是一个好的解决方案。

state.realms = Object.assign({}, state.realms)

这是我的全部突变：

addToRealms: (state, val) => {
        var id = val.id
        var realmName = val.name.en_US
        state.realms[id] = { name: realmName }
        state.realms = Object.assign({}, state.realms)
        }

这是我的 vue 页面代码

<q-btn flat
  v-for="(realm,code) in realms"
  :key="code"
  @click="selectRealm(realm)"
  :label="realm.name"
  clickable/>

我将领域定义为计算属性。

computed: {
realms () {
  return this.$store.state.realms
}

更多信息： 我使用 vue.js devtools 扩展，当我在 vuex 商店跟踪我的提交时，我可以看到我真的在改变状态。但它不会立即影响。如果我按下全部提交按钮，我的列表就会更新。

谢谢。

Answer 1

当你使用

state.realms = Object.assign({}, state.realms)

您基本上是在基于前一个对象重新创建一个新对象（在没有嵌套对象的情况下打破引用），这就是为什么以这种方式更新列表的原因。

阅读to this article 以了解有关深度克隆和破坏引用的更多信息。

Object.assign() 方法用于将所有可枚举自身属性的值从一个或多个源对象复制到目标对象

当您向对象添加新属性时，这些属性不是反应性的。要使它们具有响应性，请使用 Vue.set() 方法 (docs here)。

Vue.set(state.realms[id],'name', realmName);