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部分：

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

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

页面组件中仅提供asyncData和fetch方法。

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

1 个答案: