如何从axios响应中直接生成React对象值?

sg3maiej  于 2022-12-12  发布在  iOS
关注(0)|答案(2)|浏览(164)

我尝试从后端(用户角色)获取数据并将其分配给reactive store

import {reactive} from "vue";
import axios from "axios";

export const store = reactive({

    auth: axios.get('/api/user').then(res => res.data.role),

})

但是它不起作用。fetched object是一个user object,它的role属性是1。基本上,我想检测user.role,存储它,并使它在窗口刷新时全局可用。这意味着store.auth是这样设置的:

store.auth = 1

我知道使用sessionStorage/localStorage是可能的,但在某些情况下直接获取可能是更好的方法。
我试过了:

auth: () => axios.get('/api/user').then(res => console.log(res.data.role))
auth: async () => axios.get('/api/user').then(res => console.log(res.data.role))
auth: async () => axios.get('/api/user').then(res => return res.data.role)
auth: return axios.get('/api/user').then(res => return res.data.role)
zc0qhyus

zc0qhyus1#

试试这个

auth:(await axios.get("/api/user")).data.role
huwehgph

huwehgph2#

这个解决方案实际上尝试了HTTP请求吗?我们需要提供一些上下文来说明何时应该发出请求,它不能仅仅被分配给一个属性。
如果你想把它当作一个更传统的存储,那么你可以定义一个函数,当你需要这些信息的时候,这个函数作为一个操作被调用。由于缺乏关于如何使用这个函数的信息,我将给予一个使用onMounted的例子,当组件被加载时,它将填充这些数据。

export const store = reactive({
    auth: 0,
})

onMounted(() => {
    axios.get('/api/user').then((res) => store.auth = res.data.role)
})

相关问题