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参考：

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

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

页面内仅提供asyncData和fetch方法。