계산된 속성을 사용할 때 $store 속성이 반응하지 않음(Vuex)

계산된 속성을 사용할 때 $store 속성이 반응하지 않음(Vuex)

나는 Vuex 상점을 가지고 있는데, 내 사례에 주입하고 있다.

import store from '../store';
    
const mainNav = new Vue({
  el: '#main-nav',
  store,
  components: { NavComponent }
});

구성 요소에 있는 스토어에서 계산된 속성을 만들 겁니다.

computed: {
  isWide() {
    return this.$store.state.nav.type === 'wide';
  }
}

하면 이구동성이 .this.isWide구성 요소 초기화에 대한 템플릿 속성, 그러나 저장소 값이 업데이트되면 구성 요소가 이를 등록하지 않음 - 이전 값은 여전히 템플릿에 있음.

내가 여기서 뭘 잘못하고 있는 거지?

모든 것을 올바르게 설정한 경우 코드가작동해야 함:http://codepen.io/CodinCat/pen/RKZeZe?editors=1010

아주 흔한 실수는 당신이 주정부에서 초기 자료를 주지 않았다는 것이다.

상태 모양을 명시적으로 선언해야 하기 때문에

state: {}

// or

state: {
  nav: {}
}

다음 작업을 수행하십시오.

state: {
  nav: {
    type: '...'
  },
  ...
}

그렇지 않으면 다음과 같은 속성이 반응하지 않을 것이다. http://codepen.io/CodinCat/pen/ggxBEV?editors=1010

그리고 상태를 업데이트했는지 확인하십시오. 문제는 예상한 대로 상태를 올바르게 업데이트하지 않았다는 것일 수 있다.

사실, 당신은 Vue.set() 기능을 사용하여 새로운 속성을 반응적으로 만들어야 한다.

changeType () {
   Vue.set(this.$store.state.nav, 'type', 'wide');
}

다음 코드펜을 참조하십시오. https://codepen.io/DedicatedManager/pen/JZgpaa

나는 이 주제에 대해 전체 화면 캡처 비디오를 만들었다: youtu.be/8GHczab2Lbs

에서 할 때Vuex스토어, 당신은 어느 쪽이든 사용해야 한다.

Vue.set(obj, 'newProp', 123)

또는 그 사물을 새로운 것으로 대체한다.

state.obj = { ...state.obj, newProp: 123 }

Vuex 문서로부터

구성 요소 방법에서 저장 객체를 직접 조작해서는 안 되며, 저장 객체에 대한 돌연변이를 커밋해야 한다.돌연변이는 수신기가 있고, 호출할 때 변경된 변수를 추적하고 변경사항을 전파하는 기능이다.서버에 데이터를 제출하는 것과 같은 비동기적인 작업을 수행해야 하는 경우 저장소에서 작업을 정의하고 비동기 호출을 수행한 다음 여기서 돌연변이를 커밋하여 상태 개체를 업데이트해야 한다.나는 이것이 매우 성가신 것처럼 들린다는 것을 알지만, 일단 당신이 그것을 사용하게 되면 그것은 꽤 직설적이다.

const store = new Vuex.Store({
  state: {
    nav: {
      type: 'not wide by default'
    }
  },
  mutations: {
    changeType: (state, type) => {
      state.nav.type = type;
    }
  }
})

Vue.component('NavComponent', {
  template: '<div>isWide?: {{isWide}}</div>',
  computed: {
    isWide () {
      return this.$store.state.nav.type === 'wide'
    }
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.0/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<div id="app">
  <nav-component></nav-component>
  <button @click="changeType('wide')">
    Change to Wide
  </button>
  <button @click="changeType('narrow')">
    Change to Narrow
  </button>
</div>

https://codepen.io/zoransa/pen/KyqvWd?editors=1010

또한 https://codepen.io/zoransa/pen/xPrLyW?editors=1010 유형 없이 stat.property에서 직접 작동한다.

이렇게 해서 문제를 해결했다.

나는 다른 사물을 포함하는 국가 사물을 가지고 있다.나는 마다 Vue를사사보보보보보set다다다다setsetsetsetset. 여전히 돌연변이가 있을 때마다 설정했지만, 지저분했고 여전히 작동하지 않았다.그래서 나는 toggleState라는 부울 상태 변수를 만들어 그것을 위한 getter를 제공했다.돌연변이가 주 상태 객체를 바꿀 때마다 또한state.stateToggle =! state.stateToggle관심 있는 사람은 누구나 StateToggle의 변화를 지켜볼 수 있고, 필요한 것은 무엇이든 할 수 있다.내 경우엔, 변형된 주요 물체로 트리 뷰를 다시 만드는 겁니다.

이건 내 문제였어.

const store = new Vuex.Store({
  state: {
    isTrackPlaying: false,
  },
  ...
});

나는 초기 상태를 설정하는 것을 잊었고 이제 그것은 반응적이다.

나의 경우 변이에서 변수 '상태'를 통과시키는 것을 그냥 잊어버렸고, 이 때문에 반응하지 않았다.

const mutations = {
  [mutationTypes.storeTaskStart](state) {
    state.isSubmitting = true;
  },
};

둘 다 반응적임

$vm.$set

this.$set(some_object, 'key', 'value')

부에셋

Vue.set(some_object, 'key', 'value')

참조URL: https://stackoverflow.com/questions/41851711/store-properties-are-not-reactive-when-using-computed-property-vuex