Nuxt.js 使用 nuxtServerInit 和 Vuex 加载数据服务器端

Question

目前我正在为一个职位空缺应用程序存储数据。 对于后端，我使用 Laravel，对于前端，我使用 Nuxt.js 我是 Nuxt 的新手，所以我有点卡在以下问题上。

我有一个页面用于创建一个名为 new-job.vue 的新职位空缺。我还创建了一个名为 jobs.js 的商店来处理状态。

在 new-job.vue 上，我有一个表单，其中包含必须在表单开始之前呈现在列表中的数据。就像所有国家/地区的列表等...以便我在表单中选择它们。

此时我在 new-job.vue 的导出默认值中使用 asyncData：

<script>
export default {

    asyncData(context) {
        return context.app.$axios
            .$get('jobs/create')
            .then(data => {
                //context.store.dispatch('jobs/getTypes', data.types)
                context.store.dispatch('jobs/getPlatforms', data.platforms)
                context.store.dispatch('jobs/getCountries', data.countries)data.branches)

                // return {
                //     loadedPost: { ...data, id: context.params.postId }
                // }composer required barr
            })
            .catch(e => context.error(e))
    },
     computed: {
         types () { return this.$store.state.jobs.types },
         platforms () { return this.$store.state.jobs.platforms },
         countries () { return this.$store.state.jobs.countries },

    },
}

asyncData 方法有效，类型、平台和国家/地区的列表正在填充来自数据库的数据，并且来自 Vuex 存储的状态得到更新。 .只有数据在客户端呈现。

我更喜欢在服务器端加载这些数据，所以我正在查看 nuxtServerInit。只有有人可以向我解释我如何才能做到这一点。

我在 new-job.vue 的导出默认值中放置了一个异步调用：

     async nuxtServerInit ({ commit, state }, { app }) {
        let res = await axios.get(`jobs/create`)

        console.log(res)
        commit('setPlatforms', res.data.platforms)
        commit('setTypes', res.data.types)
        commit('setCountries', res.data.countries)
    },

我在 jobs.store 的突变中创建了提交，但状态没有更新。

我做错了什么和/或我错过了什么？

或者也许是另一个问题，nuxtServerInit 是要走的路吗？还是在客户端加载这些数据列表没什么大不了的？

更新：

我为商店使用模块模式，所以我创建了一个名为jobs.js 的商店。在这个文件中，我也尝试调用 nuxtServerInit，但没有得到任何响应。

nuxtServerInit(vuexContext, context) {
    return context.app.$axios
        .$get('jobs/create')
        .then(data => {
            console.log(data)
        })
        .catch(e => context.error(e))
},

Answer 1

来自 Nuxt.js 文档中的 nuxtServerInit API 参考：

如果在 store 中定义了动作 nuxtServerInit，Nuxt.js 将使用上下文调用它（仅从服务器端）。

换句话说，它是一个仅在store/index.js 文件中可用的保留存储操作，如果已定义，将在呈现请求的路由之前在服务器端调用。

只有asyncData 和fetch 方法在页面中可用。