如何在Wuxt(Nuxt.js)中获取WordPress菜单数据并在模板中访问？

你遇到的“data is not defined”问题，核心是没搞清楚Nuxt中fetch方法如何把数据传递给模板。你现在只是在fetch里return了数据，但组件的fetch方法并不会自动把返回值挂载到组件实例上，得手动把数据存到组件的data属性里才行。

给你两种可行的修改方案：

方案一：组件级fetch配合data选项（适合普通组件） #

先在组件里定义一个用来存储菜单数据的变量，然后在fetch里把请求到的数据赋值给它：

<template>
  <div>
    <!-- 这里可以直接用menuItems渲染菜单了 -->
    <ul>
      <li v-for="menuItem in menuItems" :key="menuItem.id">
        {{ menuItem.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import Logo from '~/components/Logo'

export default {
  components: { Logo },
  // 第一步：定义存储菜单的data变量
  data() {
    return {
      menuItems: []
    }
  },
  // 第二步：修改fetch方法，把数据赋值给this.menuItems
  async fetch() {
    try {
      const { data } = await axios.get('http://localhost:3080/wp-json/wuxt/v1/menu')
      this.menuItems = data
    } catch (e) {
      this.$nuxt.error({ message: 'Not found', statusCode: 404 })
    }
  }
}
</script>

方案二：用asyncData（适合页面级组件） #

如果你的代码是写在pages/目录下的页面组件里，可以用Nuxt的asyncData方法，它会自动把返回的数据合并到页面的data中：

<template>
  <div>
    <ul>
      <li v-for="menuItem in menuItems" :key="menuItem.id">
        {{ menuItem.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import Logo from '~/components/Logo'

export default {
  components: { Logo },
  async asyncData({ error }) {
    try {
      const { data } = await axios.get('http://localhost:3080/wp-json/wuxt/v1/menu')
      // 返回的数据会自动挂载到页面实例上
      return { menuItems: data }
    } catch (e) {
      error({ message: 'Not found', statusCode: 404 })
    }
  }
}
</script>

关键说明： #

• 普通组件里不能用asyncData，只能用fetch或者mounted钩子来请求数据并赋值给data变量。
• 你原来的fetch方法带了{ params, error }参数，那是页面级fetch的写法，但组件级fetch不需要这个上下文参数，直接用this访问组件实例即可。

内容的提问来源于stack exchange，提问作者Gas