如何访问Vue Js计算属性？

Question

我有下一个代码与vuejs，我调用axios方法post并正确设置认证用户（cosole显示用户），但是当我在组件中调用计算属性时，用户为空

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属性时

Answer 1

您的计算属性不会更新，因为这。$ auth超出了实例的范围（即不是被动的）。

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

const store = new Vuex.Store({
  state: {
    user: {}
  },
  mutations: {
    user (state, user) {
      state.user = user
    }
  }
})

然后观察组件中的更改：

import store from 'path/to/store'

store.watch(state => {
  return state.user
}, () => {
  // process authenticated user
})

Answer 2

使$auth另一个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