Vue.js 如何访问Vue Js计算属性？

我有下一个vuejs代码，我调用axios方法post并正确设置经过身份验证的用户（cosole显示用户），但是当我调用组件中的computed属性时，用户是空的

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
}

这是我获取经过身份验证的用户的代码

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
        }
    }
})
}

当我不使用computed属性时

当我在模型中使用computed属性时

---

您的计算属性将不会更新，因为此.$auth超出实例的作用域（即非反应性）

我将使用vuex，将用户置于全局状态：

const store=新的Vuex.store({
声明：{
用户：{}
},
突变：{
用户（状态，用户）{
state.user=用户
}
}
})

制作另一个Vue实例并将其作为插件安装，这样就可以从任何其他Vue实例访问它

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
}

要使用此插件，只需调用：

Vue.use(Auth)

现在，您可以从任何Vue组件访问经过身份验证的用户，如下所示：

this.$auth.authenticatedUser

---

与其设置全局

Vue

属性，我强烈建议使用vuex之类的状态管理系统