Vuex，计算属性不是反应性的答案

【问题标题】：Vuex, computed properties are not reactiveVuex，计算属性不是反应性的
【发布时间】：2018-10-12 00:12:58
【问题描述】：

我试图在一些组件（子组件）之间共享一个状态，其中每个子组件（和父组件）都可以更新共享属性（存储在 vueX 状态中）。

我在这里做了一个小“如何重现”：

Vue.component('urlQueryComponent', {
  template: '<div>object: {{pathQuery}}</div>',
  computed: {
    pathQuery () {
      return this.$store.state.urlQuery;
    }
  }
})

https://codepen.io/anon/pen/rvmLrZ?editors=1010

当我在子组件中更新状态时，没有处理更改。

VueX 实例：

const store = new Vuex.Store({
  state: {
    urlQuery:  {
      path: '',
      query: {}
    }
  },
  mutations: {
    pushQuery: (state, type) => {
      state.urlQuery.query[type.key] = type.value;
      console.log('urlQuery: ', state.urlQuery);
    },
    pushPath: (state, path) => {
      state.urlQuery.path = path;
    }
  },
  getters: {
    getUrlQuery: state => state.urlQuery
  }
})

以及父组件：

new Vue({
  el: '#app',
  store,
  methods: {
    changeType (type) {
      this.$store.commit('changeType', type);
    }
  }
})

编辑：

经过反思，之前的代码并没有真正针对我的问题。 This fiddle 更针对我的问题。

【问题讨论】：

您似乎创建了新属性。所以使用Vue API: set；喜欢this.$set(state.urlQuery.query, type.key, type.value)
您可以使用this.$set() 或Ojbect.assign()
@AdrianoResende，是的。我用Vue.set() 解决了我的问题

标签： vue.js vuex nuxt.js

【解决方案1】：

将您的 pushQuery 突变更改为：

pushQuery: ({ urlQuery }, type) => {
  const key = type.key
  Vue.set(urlQuery.query, key, type.value)
  console.log('urlQuery: ', urlQuery);
}

它应该可以工作 (fiddle here)

来源（Vuex mutations）：

变异遵循 Vue 的反应规则由于 Vuex 存储的状态是由 Vue 做出的反应，所以当我们改变状态时，观察状态的 Vue 组件会自动更新。这也意味着 Vuex 突变在使用普通 Vue 时会受到相同的反应性警告：

最好预先使用所有需要的字段来初始化商店的初始状态。

向对象添加新属性时，您应该使用：Vue.set(obj, 'newProp', 123)

【讨论】：