Question

我一直在使用Optimistic Offline-First Apps With Vuex中描述的方式将我的Vuex实例保留在重新加载之间。我已经在这里复制了相关部分。

但是有一个问题。似乎在组件安装和所应用的缓存存储区之间存在争用条件。

const store = new Vuex.Store({
  state: {
    initialized: false,
  },
  mutations: {
    loadFromCache(state, cached) {
      if (cached) {
        Object.keys(cached).forEach((key) => {
          state[key] = Object.assign({}, state[key], cached[key]);
        });
      }

      state.initialized = true;
    },
  }
});

function startLoadFromCache() {
  if (store.initialized) {
    return Promise.resolve();
  }

  return getState()
    .then(state => store.commit('loadFromCache', state));
}
startLoadFromCache();

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store
});

由于getState()返回了一个保证，所以突变不是同步提交的。所以我怎么可能：

阻止执行直到商店完全启动
检测到商店没有启动，并可能同时显示微调框？

Answer 1

您可以做的是动态创建组件渲染

<div v-if="activeComponent">
   <component :is="activeComponent"></component>
</div>

，然后从计算出的属性中返回组件。

computed: {
    activeComponent(){
        return this.$store.state.initialized ? App : null;
    }
}

如果您使用的是vue-router，则可以使用beforeEach防护措施来防止在应用初始化之前到达渲染页面。

在渲染组件之前，请确保Vuex Store已完全初始化

1 个答案: