Vuex商店只更新一个组件，而不是同时更新两个组件。

Question

所以我有一个Vuex商店，里面有几个变量，看起来是这样的：

var dataStore = new Vuex.Store({
    state: {
        consumer_id: undefined,
        some_other_data: 0
    },
    mutations: {
        update: function(type, payload) {
            state = Object.assign(type, payload);
        }
    }
});

我有两个组件，它们都是顶级的Vue组件。然而，MultiSim包围着Sim。它们都使用以下方法访问consumer_id

consumer_id: {
    get: function () {
        return this.$store.state.consumer_id;
    },
    set: function (value) {
        this.$store.commit('update', {consumer_id: value});
    }
},

问题是，在将对consumer_id的更改传播到Sim时，MultiSim只看到undefined (默认值)。MultiSim更改了consumer_id，这是所有三个组件正确捕获的，但是如果Sim更改，MultiSim就不会更新。

例如：

• MultiSim设置consumer_id = 10。
• [MultiSim: 10, Sim: 10, Store: 10]
• Sim设置consumer_id = 5。
• [MultiSim: 10, Sim: 5, Store: 5]

有人能看到我哪里出了问题吗？是否有办法强制对所有组件进行更新？

编辑：

所以我找到了一个解决方案，但这更像是一次黑客攻击，而不是任何事情：

• MultiSim设置consumer_id = 10。
• [MultiSim: 10, Sim: 10, Store: 10]
• Sim设置consumer_id = 5。
• ` `MultiSim: this.$store.state.consumer_id /* 5 */，Sim: 5，Store: 5

本质上，MultiSim的计算方法并不是在更新，尽管它可以访问实际存储的值。

Answer 1

假设在创建存储时状态上的所有属性都已初始化，则可以使用如下方法向更新突变发送通用有效负载：

const store = new Vuex.Store({
  state: {
    consumer_id: undefined,
    some_other_data: 0
  },
  mutations: {
    update: function(state, payload) {
      for ([key, value] of Object.entries(payload))
        state[key] = value
    }
  }
})

这将允许您的update突变是通用的，并将属性设置为状态。

下面是一个例子。

​

console.clear()

const store = new Vuex.Store({
  state: {
    consumer_id: undefined,
    some_other_data: 0
  },
  mutations: {
    update: function(state, payload) {
      for ([key, value] of Object.entries(payload))
        state[key] = value
    }
  }
})

const Sim = {
  template: `
<div>
Sim <input v-model="consumer_id"> {{consumer_id}}
</div>
`,
  computed:{
    consumer_id: {
      get: function () {
        return this.$store.state.consumer_id;
      },
      set: function (value) {
        this.$store.commit('update', {consumer_id: value});
      }
    },    
  }
}

const MultiSim = {
  template: `
    <div>
      MultiSim <input v-model="consumer_id"> {{consumer_id}}
    </div>
    `,
  computed:{
    consumer_id: {
      get: function () {
        return this.$store.state.consumer_id;
      },
      set: function (value) {
        this.$store.commit('update', {consumer_id: value});
      }
    },    
  }
}

new Vue({
  el: "#app",
  store,
  components: {Sim, MultiSim}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <sim></sim>
  <multi-sim></multi-sim>
</div>

​

如果在创建存储时没有在状态上初始化属性，则需要使用Vue.set。

const store = new Vuex.Store({
  state: {
  },
  mutations: {
    update: function(state, payload) {
      for ([key, value] of Object.entries(payload))
        Vue.set(state, key, value)
    }
  }
})

另外，这两种假设都假设您在每种情况下都创建有效负载，就像在计算集中所做的那样。

注意: IE中不支持Object.entries，因此您可能需要使用Object.keys。