Vuejs Vuex-Komponente nicht aktualisiert, wenn Store-Änderung

Question

Ich möchte ein einfaches Spinner aktivieren/deaktivieren.

Ich habe einen Speicher erstellen, um den Zustand des Spinners handhaben:

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 
    } 
}); 

Und ich erstellen Vue um die Ansicht zu behandeln.

<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) irgendwo genannt, weil ich diese Meldung, wenn ich diese Zeile versuchen: [vuex] already installed. Vue.use(Vuex) should be called only once. Wenn ich im Laden den Standardwert auf true gesetzt sehe ich meine Spinner so html/template ist in Ordnung.

In meinem Code verwende ich JQuery eine async Anfrage zu machen, und ich möchte, dass meine Spinner so zeigen, die ich benutze:

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

Unfortanutelly, ich kann nicht der Spinner sehen auftauchen. (Meine Anfrage dauert 2 secondes)

Also habe ich in der Konsole sah, und ich sehe:

genannt Start Stopp genannt

das bedeutet, dass die Komponente nicht isActive zwischen Start angerufen hat und stoppen .

Wie das

Dank

bearbeiten zu beheben: Ich habe eine beggining Lösung.

Meine Ajax-Anfrage ist synchron. Ich denke, es blockiert die Komponente zu rendern oder so ähnlich ... Wenn ich async: true setzen kann die Spinner sehen

Answer 1

Ich bin nicht absolut sicher, wenn es das Problem ist, aber ich würde versuchen, einen Getter für die "isActive" zu erstellen. Es würde aussehen in der Regel wie das dann:

return this.$store.getters.spinnerIsActive 

Ich bin nicht wirklich sicher, wie ein konstanten Werke in vuex zu schaffen, so dass es so etwas wie diese

auch sein könnte

return this.$store.getters.spinner.spinnerIsActive 

oder

return this.$store.spinner.getters.spinnerIsActive 

Getter sehen so aus:

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

Sie können auch überprüfen, wie ich die store in my project gebaut habe. Es ist überhaupt nicht so komplex und es könnte hilfreich sein. Übrigens, es löst wahrscheinlich nicht Ihr Problem, aber beachten Sie, dass delete kein Ereignis auslöst, deshalb muss Vue.delete() in here verwendet werden.