如何访问 Vue Js 计算属性？答案

【问题标题】：How access Vue Js computed properties?如何访问 Vue Js 计算属性？
【发布时间】：2018-01-14 09:22:13
【问题描述】：

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

当我不使用计算属性时

当我在模型中使用计算属性时

【问题讨论】：

与其设置全局Vue属性，我强烈推荐像vuex这样的状态管理系统

标签： vue.js vuejs2

【解决方案1】：

您的计算属性不会更新，因为 this.$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
})

【讨论】：

【解决方案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

【讨论】：