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

不幸的是，我看不到旋转器出现。(我的要求需要2秒(

所以我看着控制台，然后看到：

呼叫开始停止称为

这意味着该组件在开始和停止之间没有调用ISACTIVE。

如何修复该

谢谢

编辑：我已经开始了解决方案。

我的Ajax请求是同步。我认为它会阻止渲染或类似的组件...当我放置async: true时，可以看到旋转器

Answer 1

我不确定这是否是问题，但我会尝试为" 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((。