ストアの変更時にVuejs Vuexコンポーネントが更新されない

Question

シンプルなスピナーを有効/無効にしたい。

私はスピナーの状態を処理するためのストアを作成しました：

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 /テンプレートので、私のスピナーを見ます大丈夫ですか？私のコードで

、私は非同期要求を行うためにjqueryのを使用して、私は私のスピナーは、私が使うに表示したい：

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

Unfortanutelly、私はスピナーが現れて見ることができません。

（私の要求は2 secondesかかります）だから私は、コンソールに見て、私は次を参照してください。

コンポーネントが開始と停止の間のisActive呼び出していないことを意味し

呼ば 停止 を開始呼ば

。その

おかげ

編集を修正する方法

：私は解決策のbegginingをしました。

私のajaxリクエストはsynchroneです。私はそれがレンダリングするような要素をブロックするとか、そういうものをブロックすると思います... async: trueはスピナーを見ることができます

Answer 1

問題があるかどうかは確かではありませんが、 "isActive"のゲッターを作成しようとします。 これは通常、その後、次のようになります。

return this.$store.getters.spinnerIsActive 

私は実際にはわからないvuexで一定の作品を作成する方法、それはまた、この

return this.$store.getters.spinner.spinnerIsActive 

または

return this.$store.spinner.getters.spinnerIsActive 

のようなものであるかもしれないので、

ゲッターは次のようになります。

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

store in my projectのビルド方法を確認することもできます。それはまったく複雑ではなく、役に立つかもしれません。 Btw、それはおそらくあなたの問題を解決することはありませんが、通常のdeleteはイベントを引き起こさないので、Vue.delete（）はhereで使用する必要があります。