Wuxt.js (Nuxt.js) 从 axios 响应中获取数据

Question

我想使用 Wuxt 框架（Nuxt + Wordpress）从 Wordpress json 响应中提取菜单项，但我无法访问提取之外的 data 对象（错误消息是未定义数据） 这是我的代码

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

export default {

  components: {
    Logo
  },

  async fetch ({ params, error }) {
    try {
      let { data } = await axios.get('http://localhost:3080/wp-json/wuxt/v1/menu')
      return data
    } catch (e) {
      error({ message: 'Not found', statusCode: 404 })
    }
  }
}
</script>

如何访问data 对象以插入到模板中？

Answer 1

如果您使用 fetch，那么您的所有数据都应该提交到存储中并从中访问。如果要返回数据，请使用asyncData 方法。

Answer 2

我不得不稍微修改一下代码，让它返回一个带变量的数据函数，所以它看起来像这样。

export default {
  components: {
    Logo
  },
  data() {
    return { menus: [] }
  },
  mounted() {
    fetch('http://localhost:3080/wp-json/wuxt/v1/menu')
    .then(response => {
      response.json().then(menus => {
        this.menus = menus;
      })
    })
  }

}