Убедитесь, что Vuex Store полностью инициализирован перед рендерингом компонента - PullRequest
Новая
       13

Убедитесь, что Vuex Store полностью инициализирован перед рендерингом компонента

0 голосов
/ 03 июня 2019

Я использовал способ, описанный в Оптимистичных автономных первых приложениях с 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() возвращает обещание, мутация не фиксируется синхронно.Так как же мне:

  • заблокировать выполнение до тех пор, пока хранилище не будет полностью инициализировано
  • обнаружить, что хранилище не инициализировано, и, возможно, покажет спиннер?

1 Ответ

0 голосов
/ 10 июня 2019

Что вы можете сделать, это создать динамически визуализировать компонент 

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

, а затем вернуть компонент из вычисляемого свойства. 

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

Если вы используете vue-router, вы можетеиспользуйте beforeEach охрану, чтобы предотвратить доступ к странице рендеринга до инициализации приложения.

...