Vuex, 계산된 속성은 반응성이 없습니다.

Vuex, 계산된 속성은 반응성이 없습니다.

일부 구성 요소(하위 구성 요소) 간에 각 하위 구성 요소(및 상위 구성 요소)가 공유 속성을 업데이트할 수 있는 상태(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);
    }
  }
})

편집:

곰곰이 생각해 본 결과, 이전 코드는 제 문제를 겨냥한 것이 아닙니다.이 바이올린은 제 문제에 더 초점을 맞추고 있습니다.

변경 내용pushQuery변환 대상:

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

그것은 작동할 것입니다 (여기에 섞입니다).

출처(Vuex 돌연변이):

Vue의 반응성 규칙을 따르는 돌연변이 Vuex 저장소의 상태가 Vue에 의해 반응적으로 만들어지기 때문에 상태를 변이하면 상태를 관찰하는 Vue 구성 요소가 자동으로 업데이트됩니다.이것은 또한 Vuex 돌연변이가 플레인 Vue로 작업할 때 동일한 반응성 경고를 받는다는 것을 의미합니다.

1. 원하는 모든 필드를 미리 사용하여 스토어의 초기 상태를 초기화하는 것을 선호합니다.

2. 개체에 새 속성을 추가할 때는 다음 중 하나를 사용해야 합니다.Vue.set(obj, 'newProp', 123)

언급URL : https://stackoverflow.com/questions/50125249/vuex-computed-properties-are-not-reactive