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

【问题标题】：Vue.js - Why my child component cannot access store getter as property?Vue.js - 为什么我的子组件无法访问 store getter 作为属性？
【发布时间】：2019-10-25 18:52:49
【问题描述】：

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

我在文档中读到我们可以将其作为属性访问，但是当我这样做时，它会返回 getter 函数的签名，这是我的代码：常量存储 = { 状态： { 贮存 }, 吸气剂：{ 用户名：（状态，吸气剂）=> { 返回'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';
}

知道为什么吗？

谢谢 ;)

【问题讨论】：

您是否尝试过从 getter 中删除 getter 参数？如果你设置 getter 会发生什么： getters: { username: state => { return 'tmp'; } }

标签： vue.js vuex getter

【解决方案1】：

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

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 '-'

【讨论】：