1

我是 VueJS 和 NuxtJS 的新手。我想设置以下路线：

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

每当用户访问诸如 url 时https://example.com/resources/samsung/laptop，我想向HTTP GETREST API 发出请求以下载所有部分和类别并将其保存到“全局变量”中。每当用户点击<nuxt-link>我网站上的任何内容时，NuxtJS 都不会再向 REST API 发出任何 HTTP GET 请求，除非我明确清空了“全局变量”。我从一些资料中了解到，我可以通过使用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. 当我第一次访问该 urlhttps://example.com/resources/samsung/laptop时，我的开发人员工具会显示resource store undefined，然后我看到我的浏览器成功地获取了数据。这是我所期望的。

  2. 当我点击 时<nuxt-link to="/resources/motorola/computer" />，我又看到resource store undefined了。这不是我所期望的。资源存储应已从步骤 1 填充。

  3. 当我点击时<nuxt-link to="/resources/motorola/phone" />，我看到了resource store {Object > sections: etc...。这就是我所期望的。但是为什么它在第 3 步而不是更早的时候填充呢？

我的问题是为什么资源存储在我第二次nuxt-link点击时是空的？nuxt-link我希望在第 1 步单击后立即填充资源存储 。

我究竟做错了什么？

4

0 回答 0