How access Vue Js computed properties? - vue.js

Question

I have the next code with vuejs, i call axios method post and set the authenticated user correctly(cosole show the user), but when i call the computed property in the component the user is empty
export default {
data() {
return {
isAuth: null,
}
},
computed: {
authenticatedUser () {
return this.getAuthenticatedUser()
}
},
created() {
this.isAuth = this.$auth.isAuthenticated()
this.setAuthenticatedUser()
},
methods: {
setAuthenticatedUser () {
axios.get('/api/user')
.then(response => {
this.$auth.setAuthenticatedUser(response.data)
console.log(this.$auth.getAuthenticatedUser())
})
},
getAuthenticatedUser(){
return this.$auth.getAuthenticatedUser()
}
},
router
}
And this my code for get the authenticated user
export default function (Vue) {
let authenticatedUser = {};
Vue.auth = {
//set token
setToken (token, expiration) {
localStorage.setItem('token', token)
localStorage.setItem('expiration', expiration)
},
//get token
getToken() {
var token = localStorage.getItem('token')
var expiration = localStorage.getItem('expiration')
if( !token || !expiration)
return null
if(Date.now() > parseInt(expiration)){
this.destroyToken()
return null
}
else{
return token
}
},
//destroy token
destroyToken() {
localStorage.removeItem('token')
localStorage.removeItem('expiration')
},
//isAuthenticated
isAuthenticated() {
if(this.getToken())
return true
else
return false
},
setAuthenticatedUser(data){
return authenticatedUser = data;
},
getAuthenticatedUser(){
return authenticatedUser;
},
}
Object.defineProperties(Vue.prototype, {
$auth: {
get() {
return Vue.auth
}
}
})
}
When i not use the computed property
When i use the computed property in the model

Answer 1

Your computed property won't be updated because this.$auth is out of the instance’s scope (i.e. not reactive).
I would use vuex, putting the user inside the global state:
const store = new Vuex.Store({
state: {
user: {}
},
mutations: {
user (state, user) {
state.user = user
}
}
})
and then watch changes in your component:
import store from 'path/to/store'
store.watch(state => {
return state.user
}, () => {
// process authenticated user
})

Answer 2

Make $auth another Vue instance and install it as a plugin, this way, it will be accessible from any other Vue instance.
function Auth(Vue) {
let auth = new Vue({
data: {
// your auth data
authenticatedUser = {}, // This one is now reactive
},
computed: {
// your auth computed properties
},
methods: {
// your auth methods
setAuthenticatedUser(data){
return this.authenticatedUser = data
},
}
})
Vue.prototype.$auth = auth
}
To use this plugin, simply call:
Vue.use(Auth)
Now, you can access the authenticated user from any Vue component like this:
this.$auth.authenticatedUser