时间戳

首页 > 解决方案 > Vue.js - 为什么我的子组件无法访问 store getter 作为属性？

vue.js - Vue.js - 为什么我的子组件无法访问 store getter 作为属性？

问题描述

我在我的商店中定义了一个吸气剂，我尝试在我的子组件中访问它，但我只能将它作为一种方法来访问......

我在文档中读到我们可以将其作为属性访问，但是当我这样做时，它会返回 getter 函数的签名，这是我的代码： const store = { state: { storage }, getters: { username: ( state, getters) => { return 'tmp'; } } }

我的子组件：

export default {
    data() {
        return {
            username: this.initialUsername
        }
    },
    methods: {
        ...mapMutations([
            'login'
        ]),
        onLogin(e) {
            this.login(this.username);
        }
    },
    computed: {
        ...mapGetters({
            initialUsername: 'username'
        })
    },
    created() {
        console.log(this.username)
    }
}

我在控制台中得到什么：

ƒ username(state, getters) {
      return 'tmp';
}

知道为什么吗？

谢谢 ;）

标签： vue.jsvuexgetter

解决方案

好吧，我知道为什么它不起作用大声笑，我只是没有实例化一个 vuex 存储，而只是一个包含我的状态和吸气剂的普通对象......：

export default {
    state: {
        storage
    },
    getters: {
        username: (state, getters) => {
            return state.storage.username;
        }
    },
    mutations: {
        [LOGIN]: (state, username) => {
            state.storage.username = username;
        },
        [LOGOUT]: state => {
            state.storage.logout();
        }
    }
}

对不起，我是第一次使用 vuex '-'

推荐阅读