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 /模板没问题。

在我的代码，我使用jQuery做一个异步请求，我希望我的微调展现出来，所以我使用：

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

Unfortanutelly，我看不到微调显示出来。（我的要求需要2个secondes）

所以，我看着在控制台中，我看到：

称为开始停止称为

这意味着该组件没有启动之间调用isActive和停止。

如何解决

感谢

编辑：我的解决方案beggining。

我的ajax请求是synchrone。我认为它阻止组件渲染或类似的东西...当我把async: true可以看到微调

来源

2017-05-04 Epitouille

我没有在代码中的任何地方看到'Vue.use（Vuex）'，并且你没有创建一个Vuex存储（'new Vuex.Store'） - 你只是创建一个共享状态变量。 – PatrickSteele

我没有把所有的代码发布，看我的编辑:) – Epitouille

我不是绝对相信，如果这是问题，但我会尝试创建一个“isActive”的getter。它通常会看起来像那么：

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的。这并不是那么复杂，它可能会有所帮助。顺便说一句，它不可能解决您的问题，但请注意，通常delete不会触发事件，因此需要在here中使用Vue.delete（）。

来源

2017-05-04 14:14:10

Vuejs Vuex组件在商店更改时未更新

回答

相关问题