저장소 변경 시 Vuejs Vuex 구성 요소가 업데이트되지 않음

저장소 변경 시 Vuejs Vuex 구성 요소가 업데이트되지 않음

단순 스피너를 활성화/비활성화합니다.

스피너 상태를 처리하기 위해 스토어를 만들었습니다.

const spinnerStore = {
  state: {
    isActive: false
  },

  mutations: {
    startSpinner: function (state) {
      console.log('start');
      state.isActive = true
    },

    stopSpinner: function (state) {
      console.log('stop');
      state.isActive = false
    }
  },

  actions: {
    startSpinner: function ({commit}) {
      commit('startSpinner');
    },

    stopSpinner: function ({commit}) {
      commit('stopSpinner');
    }
  }
}

const store = new Vuex.Store({
    modules: {
        'mapEditor': mapEditorStore,
        'spinner': spinnerStore
    }
});

뷰 처리를 위한 Vue를 만듭니다.

<script type="x-template" id="vueSpinnerTemplate">
  <div class="mdl-spinner mdl-js-spinner mdl-spinner--single-color" style="position: absolute; bottom: 50px; right: 50px; z-index: 10" v-bind:class="{'is-active': isActive}"> </div>
</script>

<script>

var vm = new Vue({

    store,

    template: '#vueSpinnerTemplate',

    computed: {
        isActive: function () {
            console.log('called');
            return this.$store.state.spinner.isActive
        }
    }
}).$mount('#spinner-mount-point');

</script>

Vue.use(Vuex)는 이 행을 시도하면 다음 메시지가 나타나기 때문에 어딘가에서 호출됩니다. [vuex] already installed. Vue.use(Vuex) should be called only once. 스토어에서 기본값을 다음과 같이 설정하면true스피너가 보여서 html/template도 괜찮아요.

코드에서는 Jquery를 사용하여 비동기 요청을 하고 스피너를 표시하고 싶기 때문에 다음을 사용합니다.

store.dispatch('startSpinner');
$.ajax({
  url : "myUrl", 
  success: function (data) {
      store.dispatch('stopSpinner'); 
  }
});

아쉽게도 스피너가 안 보여 (요청하는데 2초 걸립니다)

콘솔을 살펴보니 다음과 같습니다.

호출된 시작 중지 호출됨

즉, 컴포넌트가 시작과 정지 사이에 isActive를 호출하지 않았습니다.

그것을 고치는?

고마워요.

편집: 해결 방법이 없습니다.

제 아약스 요청은 싱크로네입니다.렌더링할 부품을 차단하는 것 같아요내가 넣었을 때async: true스피너가 보인다

그것이 문제인지는 확실하지 않지만, "isActive"의 getter를 작성하려고 합니다.그러면 보통 다음과 같이 됩니다.

return this.$store.getters.spinnerIsActive

vuex에서 상수 생성은 실제로 어떻게 작동하는지 잘 모르기 때문에 다음과 같은 경우도 있습니다.

return this.$store.getters.spinner.spinnerIsActive

또는

return this.$store.spinner.getters.spinnerIsActive

Getters는 다음과 같습니다.

getters = {
    spinnerIsActive: state => state.isActive
}

내 프로젝트에서 내가 어떻게 가게를 지었는지도 확인할 수 있어.전혀 복잡하지 않고 도움이 될 수도 있어요.그나저나, 그게 네 문제를 해결해주진 않겠지만, 평소 같으면delete이벤트를 트리거하지 않기 때문에 여기서 Vue.delete()를 사용해야 합니다.

언급URL : https://stackoverflow.com/questions/43781828/vuejs-vuex-component-not-updated-when-store-change