I am attempting to retrieve data from the backend (specifically the user role) and store it in a reactive container with Vue:
import {reactive} from "vue";
import axios from "axios";
export const store = reactive({
auth: axios.get('/api/user').then(res => res.data.role),
})
Unfortunately, I am encountering issues. The data being fetched is in the form of a user object with a property called role which has a value of 1. Essentially, I want to capture this user role, save it globally and have it persist even when the window is refreshed. This would mean that store.auth is assigned as follows:
store.auth = 1
I understand that this could be achieved using sessionStorage or localStorage, but there are cases where direct fetching seems like a more appropriate approach.
I have already attempted the following methods:
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)