如何将axios响应数据提取到vuejs中的变量

Question

我试图在Vue中实现与...mapState()功能相同的功能。

我有一个axios请求，它返回一个具有不同道具的对象，如下所示：

axios.get(
 '/'
).then(
 res => {
  console.log(res) // {name: 'foo', age: 22, height: '1.72m', job: 'developer'}
 }
)

现在，和...mapState()一样，我可以提取道具，这样我就可以在我的模板中使用它们，如：

<template>
 <div> 
  Hello My name is {{name}} and I am {{age}} years old
 </div>
</template>

我正在考虑将响应对象分配给vuejs数据，但我还有其他变量我不想重写

Answer 1

你可以试试这个：

axios.get(
 '/'
).then(
 res => {
  console.log(res) // {name: 'foo', age: 22, height: '1.72m', job: 'developer'}
  return { index: res}
 }
)

然后你可以访问数据

<template>
 <div> 
  Hello My name is {{index.name}} and I am {{index.age}} years old
 </div>
</template>