检查vuex-persist是否已还原Nuxt项目中的数据

Question

我已经在我的Nuxt项目中添加了Vuex-Persist和Vuex-ORM。当应用程序首次启动时，我想添加一些样板数据。

在我的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。但由于vuex-persist尚未还原本地数据，因此它将始终返回0。

根据the docs ，这将是解决方案

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

我认为您必须把整个东西都放在一个路由守卫中。

创建这样的route-guard.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
        }
    }

}

Answer 2

我从vuex-persist的the instructions那里获取了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' }] })
    }
  });
}