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

我不确定这是否是问题，但我会尝试为＃34; isActive＆＃34;创建一个吸气剂。它通常看起来像那样：

return this.$store.getters.spinnerIsActive

我真的不确定如何在vuex中创建一个常量，所以它可能也是这样的

return this.$store.getters.spinner.spinnerIsActive

或

return this.$store.spinner.getters.spinnerIsActive

Getters看起来像这样：

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

您还可以查看我是如何构建store in my project的。它根本不复杂，可能会有所帮助。顺便说一句，它不可能解决你的问题，但请注意，通常delete不会触发事件，因此需要在here中使用Vue.delete（）。

存储更改时，Vuejs Vuex组件未更新

1 个答案: