代码之家  ›  专栏  ›  技术社区  ›  dendog

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

  •  0
  • dendog  · 技术社区  · 6 年前

    我在我的商店里创建了一些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)
    

    事先谢谢!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Volkan Seçkin Akbayır    6 年前

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

    应该是这样的:

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