Vuex, вычисленные свойства не являются реактивными - PullRequest
Новая
       4

Vuex, вычисленные свойства не являются реактивными

0 голосов
/ 02 мая 2018

Я пытаюсь разделить состояние между некоторыми компонентами (подкомпонентами), чтобы каждый подкомпонент (и родительский компонент) мог обновить общее свойство (хранить в состоянии 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);
    }
  }
})

EDIT:

После размышления, код, приведенный выше, на самом деле не предназначен для моей проблемы. Эта скрипка больше ориентирована на мою проблему.

1 Ответ

0 голосов
/ 02 мая 2018

Измените свою pushQuery мутацию на: 

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

это должно работать ( скрипка здесь )

Источник ( Мутации Vuex ):

Мутации следуют правилам реактивности Vue Поскольку состояние хранилища Vuex становится реактивным с помощью Vue, когда мы изменяем состояние, компоненты Vue, наблюдающие за состоянием, обновляются автоматически. Это также означает, что при работе с простым Vue мутации Vuex подвергаются тем же предостережениям о реактивности:

  1. Предпочитайте инициализацию начального состояния вашего магазина всеми необходимыми полями заранее.

  2. При добавлении новых свойств к объекту вы должны либо использовать: Vue.set(obj, 'newProp', 123)

...