无法访问商店模块中的吸气剂

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。 Getter 允许您访问动态计算的值，就像它们是一个属性一样（即没有函数调用）。

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

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

请参阅MDN doc，了解如何定义和使用 getter。

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

进一步阅读

• Vuex getter documentation
• JavaScript getter documentation