vuex 突变不会更新 DOM

Question

我正在渲染一个基于 object 的列表。 我在突变的帮助下向这个 object 添加了新元素。 当我将 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 商店跟踪我的提交时，我可以看到我真的在改变 state。 但它不会立即影响。 如果我按下全部提交按钮，我的列表就会更新。

谢谢。

Answer 1

当你使用

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

你基本上是在前一个的基础上重新创建一个新的 object （如果没有嵌套对象，则打破引用），这就是为什么以这种方式更新列表的原因。

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

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

当您向 object 添加新属性时，这些属性不会反应。 要使它们具有响应性，请使用 Vue.set() 方法（此处的文档）。

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