Question

我是nuxt.js的新手，所以我想知道什么是通过REST api设置数据的最佳方式。

我有一个像这样的商店文件夹：

store
    -posts.js
    -categories.js
    -index.js

我尝试使用nuxtServerInit中的index.js操作设置数据：

export const actions = {
    async nuxtServerInit({ dispatch }) {
        await dispatch('categories/setCategories')
        await dispatch('posts/loadPosts','all')


      }
}

但不起作用：调度（在服务器上）但未设置数据。

所以我尝试使用fetch但每次加载我必须显示帖子的页面时都会调用此方法。即使在总体布局中，我这样做：

<template>
  <div>
    <Header />
    <keep-alive>
      <nuxt/>
    </keep-alive>

  </div>
</template>

所以我现在的解决方案就是以这种方式使用fetch，在页面组件中：

 async fetch({store}){
       if(store.getters['posts/getPosts'].length === 0 && store.getters['categories/getCategories'].length === 0 ){
            await store.dispatch('categories/setCategories')
            await store.dispatch('posts/loadPosts','all')
       } 
   }

另外，我注意到的一件事是fetch似乎不适用于根页面组件（pages / index.vue）

我的解决方案似乎有效，但是可能有另一种更好的方法来设置数据？

Answer 1

没有针对此需求的开箱即用解决方案。我的解决方案与您的解决方案非常相似，但是我没有检查数据数组的大小，而是在每个存储模块中引入了附加变量loaded。我只在加载为false时才获取数据。此方法更适合具有用户生成的内容且需要身份验证的应用。它将与SSR和客户端一起最佳地工作，如果用户没有数据，它将不会尝试在每次页面访问时获取数据。

您还可以像这样简化获取方法：

async fetch()
{
    await this.$store.dispatch('posts/getOnce')
}

现在您的posts.js存储模块将如下所示：

export const state = () => ({
    list: [],
    loaded: false
})

export const actions = {
    async getOnce({ dispatch, state }) {
        if (!state.loaded) {
            dispatch('posts/get')
        }
    },
    async get({ commit, state }) {
        await this.$axios.get(`/posts`)
            .then((res) => {
                if (res.status === 200) {
                    commit('set', res.data.posts)
                }
            })
    }         
}

export const mutations = {
    set(state, posts) {
        state.list = posts
        state.loaded = true
    }
}

仅使用nuxt.js

1 个答案: