无法访问商店模块中的getter

Question

这是我的商店模块的定义。

// rest defined above
const _GETTERS = {
  getName: state => {
    return state.current.name;
  },
  getLastName: state => {
    return state.current.lastName;
  },
  getFullName: (state, getters) => {
    // return `${state.current.name} ${state.current.lastName}`;
    return `${getters.getName()} ${getters.getLastName()}`;
  },
  getMailAddress: state => {
    return state.current.mailAddress;
  }
};

const UsersStore = {
  ...
  getters: _GETTERS
};

以上是我的user-store模块，我得到Uncaught TypeError: getters.getName is not a function错误。当我更改代码以使用访问state而不是getters的版本时，一切正常。下面是主要商店对象，我将上面的内容添加为模块。

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: _state,
  getters: _getters,
  actions: _actions,
  mutations: _mutations,
  modules: {
    users: UserStore
  }
});

这是它应该呈现的位置，并且在直接访问商店而不是使用getter时它可以正常工作。

import {Component, Vue} from 'vue-property-decorator';
import {mapGetters} from 'vuex';

const template = require('./app-footer.vue').default;

@Component({
  mixins: [template],
  computed: {
    ...mapGetters({
      name: 'getFullName'
    })
  }
})
export default class AppFooter extends Vue {
}

Answer 1

问题

这是您的错误：

  

Uncaught TypeError: getters.getName is not a function

这是您的代码：

getFullName: (state, getters) => {
  return `${getters.getName()} ${getters.getLastName()}`;
},

引发错误的原因是，当您将getters.getName作为函数（getters.getName()）时，它会尝试将其作为函数调用。

您可以将其与报告没有引发错误的情况进行比较：

getFullName: (state, getters) => {
  return `${state.current.name} ${state.current.lastName}`;
},

您正在访问state.current.name作为属性 - 不将其称为函数。

有关使用getter的指导，请参阅Vuex的getter documentation。

解决方案

通过删除不需要的括号，停止尝试将getters.getName作为函数调用。

注释

为什么getters.getName不是函数？它看起来像定义为一个函数。在文档中查看此示例 - doneTodos是一个函数，对吗？

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}

- https://vuex.vuejs.org/en/getters.html

您在getters对象上定义的方法在store对象上设置为getter。 Getters允许您访问动态计算的值，就像它们是属性一样（即没有函数调用）。

  

有时需要允许访问返回动态计算值的属性，或者您可能希望反映内部变量的状态而无需使用显式方法调用。在JavaScript中，这可以通过使用getter来完成。虽然可以结合使用getter和setter来创建一种伪属性，但是不可能同时将getter绑定到属​​性并使该属性实际保存值。

- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

有关如何定义和使用getter的信息，请参阅MDN doc。

VueJS采用在getters对象上定义的方法，并使用Object.defineProperty在商店对象上定义getter，这样就可以访问动态计算的属性。如果您熟悉VueJS的computed properties，行为和用法基本相同。

进一步阅读

• Vuex getter documentation
• JavaScript getter documentation