Question

我试图在一些组件（子组件）之间共享一个状态，其中每个子组合（和父组件）可以更新共享属性（以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更针对我的问题。

Answer 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组件将自动更新。这也意味着当使用普通Vue时，Vuex突变会受到相同的反应性警告：



首选初始化商店的初始状态，包括所有需要的字段。



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

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

1 个答案: