Vue计算属性中使用Vuex Getters出现未定义错误求助

你遇到的ReferenceError: getFullVendorList is not defined错误，核心原因是没有通过组件实例的this来访问映射后的getter。

当你用...mapGetters([ 'getCurrentClientConfig', 'getFullVendorList' ])把Vuex的getter映射到组件的computed属性时，这些getter会被挂载到组件的实例（也就是this）上，而不是变成全局变量或者直接可用的局部变量。所以你在totalVendors、pageCount和paginatedData这几个计算属性里直接写getFullVendorList，JavaScript自然找不到这个变量。

修改后的正确代码 #

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() { 
      // 加上this访问映射后的getter
      return this.getFullVendorList.vendors.length; 
    }, 
    pageCount() { 
      let l = this.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 this.getFullVendorList.vendors.slice(start, end); 
    } 
  } 
}

额外优化提示 #

你还可以把重复访问的this.getFullVendorList.vendors存成局部变量，让代码更简洁，也减少不必要的属性查找：

paginatedData() { 
  const vendors = this.getFullVendorList.vendors;
  let start = (this.pageNumber - 1) * this.size; 
  let end = start + this.size; 
  return vendors.slice(start, end); 
}

内容的提问来源于stack exchange，提问作者dendog