在其他计算属性中使用 Vuex getter答案

【问题标题】：Using Vuex getters, inside other computed properties在其他计算属性中使用 Vuex getter
【发布时间】：2018-05-21 14:20:50
【问题描述】：

我在我的商店中创建了一些 getter 并使用 mapGetters 映射它们，如下所示，它们中的数据在 Vue 调试工具中是正确的。

现在我正在使用这些数据来创建一些用于分页的计算属性，如下所示。但我不确定为什么错误显示 getter 返回未定义。

export default {
  data() {
    return {
      pageNumber: 1
    }
  },
  props: {
    size: {
      type: Number,
      required: false,
      default: 5
    }
  },
  methods: {
    nextPage() {
      this.pageNumber++
    },
    prevPage() {
      this.pageNumber--
    }
  },
  computed: {
    ...mapGetters([
      'getCurrentClientConfig',
      'getFullVendorList'
    ]),
    totalVendors() {
      return getFullVendorList.vendors.length;
    },
    pageCount() {
      let l = getFullVendorList.vendors.length;
      let s = this.size;
      return Math.floor(l / s);
    },
    paginatedData() {
      let start = (this.pageNumber - 1) * this.size;
      let end = start + this.size;
      return getFullVendorList.vendors.slice(start, end);
    }
  }
}

由于某种原因，我在控制台中收到undefined 错误，如下所示：

vue.runtime.esm.js:588 [Vue warn]: Error in render: "ReferenceError: getFullVendorList is not defined"

found in

---> <Vendors> at client/ui/components/Vendors.vue
       <VkModal>
         <Root>
vue.runtime.esm.js:1736 ReferenceError: getFullVendorList is not defined
    at VueComponent.paginatedData (Vendors.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:71)
    at Watcher.get (vue.runtime.esm.js:3137)
    at Watcher.evaluate (vue.runtime.esm.js:3244)
    at VueComponent.computedGetter [as paginatedData] (vue.runtime.esm.js:3500)
    at Object.get (vue.runtime.esm.js:1915)
    at Proxy.render (Vendors.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:21)
    at VueComponent.Vue._render (vue.runtime.esm.js:4532)
    at VueComponent.updateComponent (vue.runtime.esm.js:2783)
    at Watcher.get (vue.runtime.esm.js:3137)
    at new Watcher (vue.runtime.esm.js:3126)

提前致谢！

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

您需要从实例引用中获取它

应该是这样的：

totalVendors() {
  return this.getFullVendorList.vendors.length;
},

【讨论】：