检查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还没有完成本地数据的恢复。

根据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

我从vuex- 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' }] })
    }
  });
}

Answer 2

我想你得把整件事都放在一个路障里。

创建一个如下所示的route-guard.js插件。但是我还没有测试整个东西，希望它能进一步帮助你。

export default function ({app}) {

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

    app.router.beforeEach(waitForStorageToBeReady);
}

另一种选择是在computed中放置一个getter并观察它：

export default {

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

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

}