如何将Composition API中的Axios响应中的变量返回到根级别？

Posted 2023-02-22

【中文标题】如何将Composition API中的Axios响应中的变量返回到根级别？

【英文标题】：How to return variable from Axios Response in Composition API to root level?

【发布时间】：2021-12-11 13:19:13

【问题描述】：

我想从axios.get 函数中返回headings 数组并在我的vue component 内的root level 上使用它，但是当我尝试返回它时，它显示：

ReferenceError: headings is not defined

这是我的Vue3 Component 中的script element：

<script setup>
import ref from 'vue';

const homePage = ref(
    heading: "",
    content: "",
    image: ""
);

axios.get('/home')
    .then(res => 
        const data = res.data[res.data.length - 1]
        const headings = 
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        
        return headings;
    )

console.log(headings);

</script>

编辑：

感谢 Thomas 和 huan feng​​strong> 我可以做到：

<script setup>
import reactive from 'vue';

const state = reactive(
    headings: ,
    content: ,
    image: ""
)

axios.get('/home')
    .then(res => 
        const data = res.data[res.data.length - 1]

        state.headings = 
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        

        console.log(state.headings.en)
    )

</script>

这是最优雅的解决方案，因为reactive 对象在处理数组时提供了最简洁的框架。像这样从vue component 调用它：

    <h2> state.headings.en </h2>

由于axios 是asynchronous，将变量返回到root level 更加困难，在我的情况下没有必要。我可以在then里面输出。

【问题讨论】：

headings 未定义。您需要有一个const headings = ref(null)，然后不返回它，而是在then 中分配它。并且日志语句会立即执行，不等待axios响应

【参考方案1】：

// Better to wrap page states in a reactive object
const state = reactive(
    headings: []
)

axios.get('/home')
.then(res => 
    const data = res.data[res.data.length - 1]
    state.headings = 
        en: data['heading_(en)'],
        de: data['heading_(de)'],
        ar: data['heading_(ar)'],
    ;
)
// Use state.headings before this line,
// Unpack it and you can directly use headings in template 
const headings = toRefs(state);

【讨论】：

我认为我的问题还不够清楚。我不需要在整个项目中全局使用变量，只在这个组件中。也许global 用错词了。

请看我更新的答案

谢谢，现在我可以访问state的内容了。只是有一个小问题，无论出于何种原因，我都可以像console.log(state) 那样访问它，它输出整个对象，但不像console.log(state.headings) 那样，尽管state 对象有一个名为headings 的子对象。它返回未定义。有什么想法吗？

你在哪里控制台记录状态？在将 axios 响应分配给 state.headings 之后？

【参考方案2】：

扩展我的评论：

<script setup>
import  reactive  from 'vue';

const homePage = reactive(
    headings: ,
    content: '',
    image: ''
);

axios.get('/home')
    .then(res => 
        const data = res.data[res.data.length - 1]
        homePage.headings = 
            en: data['heading_(en)'],
            de: data['heading_(de)'],
            ar: data['heading_(ar)'],
        
    )

</script>

我建议对对象使用响应式。

编辑：将响应应用于homePage 反应对象。

【讨论】：

您好，这种方法有效，但有没有办法将变量直接分配给 const homePage = ref( heading: "", content: "", image: "" ); 而不是 const headings？我的问题是我有很多这样的fields，如果我可以直接将它们发送到ref array，那就太好了。

@ArturMüllerRomanov 你能把你的问题扩大一点吗？我仍然不确定你想要什么。还是homePage 对象中的heading 实际上是一个数组，应该称为headings？