Проверьте, восстановил ли vuex-persist данные в проекте Nuxt

Question

Я добавил Vuex-Persist и Vuex-ORM в свой проект Nuxt. Когда приложение запускается в первый раз, я хочу добавить некоторые типовые данные.

В моем макете default.vue я добавил созданную функцию для добавления этих фиктивных данных.

<script>
import Project from '../models/Project';

export default {
  created () {
    // I'm Using Vuex-Orm to check if there are any projects stored
    if (Project.query().count() === 0) {
      Project.insert({ data: [{ title: 'My first project' }] })
    }
  }
}
</script>

Когда приложение перезагружается и открывается во второй раз, я ожидаю, что Project.query().count() вернет 1. Но оно всегда вернет 0, потому что vuex-persist еще не завершил восстановление локальных данных.

Согласно документы это было бы решением

import { store } from '@/store' // ...or wherever your `vuex` store is defined

const waitForStorageToBeReady = async (to, from, next) => {
  await store.restored
  next()
}

store.defined не определено и то же самое относится к this.$store. Этот комментарий подчеркивает мой точный вопрос "Где определен мой магазин vuex?"

Answer 1

Я следовал инструкциям из vuex-persist для Nuxt и создал файл плагина, например:

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
    /* your options */
    }).plugin(store);
  });
}

window.onNuxtReady вызвал загрузку плагина после всего остального кода побежал. Поэтому я не имел значения, сделал ли я плагин router-guard.js или попробовал его в файле layout/default.vue.

Я закончил с быстрым исправлением:

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
 window.onNuxtReady(() => {
    new VuexPersistence().plugin(store);

    if (Project.query().count() === 0) {
      Project.insert({ data: [{ title: 'My first project' }] })
    }
  });
}

Answer 2

Я думаю, вы должны поместить все это в охрану маршрута.

создать охрану маршрута. js плагин как этот. но я не проверил все это, надеюсь, это поможет вам в дальнейшем.

export default function ({app}) {

    const waitForStorageToBeReady = async (to, from, next) => {
        await store.restored
        next()
    }

    app.router.beforeEach(waitForStorageToBeReady);
}

Другой вариант - включить геттер в вычисления и посмотреть его:

export default {

    computed: {
        persistState() {
            return this.store.getter['get_persis_state'];
        }
    },

    watch: {
        persistState(newVal) {
            // check new val
        }
    }

}