получить хранилище vuex, заполненное после 3-го щелчка по Nuxt-ссылке вместо 2-го щелчка по Nuxt-ссылке

Question

Я новичок в VueJS и NuxtJS. Я хочу настроить следующий маршрут:

      https://example.com/resources/:sections/:categories

Каждый раз, когда пользователь посещает URL-адрес, например, я хочу сделать HTTP GETзапрос к REST API для загрузки всех разделов и категорий и сохранения их в «глобальную переменную». Каждый раз, когда пользователи нажимают на любой <nuxt-link>на моем веб-сайте NuxtJS НЕ будет больше выполнять HTTP-запросы GET к REST API, если я явно не очистил «глобальную переменную». Я прочитал из нескольких источников, что могу добиться этого, используя fetch() функция для заполнения vuex store.

Поэтому я сделал следующие два файла:

      // ~/pages/resources/_.vue

<template>
  <div>
    <nuxt-link to="/resources/samsung/laptop">Samsung Laptop</nuxt-link>
    <nuxt-link to="/resources/samsung/mouse">Samsung Mouse</nuxt-link>
    <nuxt-link to="/resources/samsung/computer">Samsung Computer</nuxt-link>
    <nuxt-link to="/resources/motorola/computer">Motorola Computer</nuxt-link>
    <nuxt-link to="/resources/motorola/laptop">Motorola Laptop</nuxt-link>
    <nuxt-link to="/resources/motorola/phone">Motorola Phone</nuxt-link>
  </div>
</template>

<script>


export default {
  middleware: 'auth',
  async fetch({ $axios, $auth }) {

    console.log('resource store', this.resources);

    const sections = await $axios.get('/sections')
    const categories = await $axios.get('/categories')
    const resources = await $axios.get(`/resources/${$auth.user.id}/list`)
    
    this.resources = {
      sections: sections.data.data,
      categories: categories.data.data,
      resources: resources.data,
      user: $auth.user,
    }
  },
  computed: {
    resources: {
        get(){
          return this.$store.state.resources
        },
        set(val){
          this.$store.dispatch('setResources',val)
        }
    },
  },
}
</script>



// ~/store/resources.js

export const state=()=>({
  resources:{}
})

export const mutations ={
  SET_RESOURCES(state,payload){
      state.resources=payload
  }
}

export const actions ={
   setResources(context,payload){
        context.commit('SET_RESOURCES',payload)
   }
}

Это «почти» делает то, что я хочу.

1. Когда я захожу по URL https://example.com/resources/samsung/laptopвпервые отображаются мои инструменты разработчика, и я вижу, что мой браузер сразу после этого успешно извлекает данные. Это то, чего я ожидал.

2. Когда я нажимаю на <nuxt-link to="/resources/motorola/computer" />, Понимаю resource store undefinedопять таки. Это НЕ то, что я ожидал. Хранилище ресурсов уже должно быть заполнено с шага 1.

3. Когда я нажимаю на <nuxt-link to="/resources/motorola/phone" />, Понимаю resource store {Object > sections: etc.... Этого я и ожидал. Но почему он был заполнен на шаге 3, а не ранее?

У меня вопрос: почему хранилище ресурсов пусто при втором щелчке? Я ожидал, что хранилище ресурсов будет заполнено сразу после шага 1 nuxt-link нажмите.

Что я делаю не так?