1

目前我正在为一个职位空缺应用程序存储数据。对于后端我使用 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))
},
4

1 回答 1

8

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

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

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

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

于 2018-10-31T12:59:31.430 回答