установить данные только при первой загрузке с nuxt.js

Question

Я новичок в nuxt.js, поэтому мне интересно, что может быть лучшим способом настроить некоторые данные через API REST.

У меня есть папка магазина, подобная этой:

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)

Мое решение, кажется, работает, но может быть есть другой лучший способ установить данные?