Vuex模板中如何通过Getter简化嵌套属性的调用？

首先得直接说：你设想的那种写法行不通。v-bind的作用是给HTML元素绑定属性（比如v-bind:class、v-bind:src这类），它不会把getter返回的对象变成组件作用域内的变量，模板里的scopedObject根本不被组件识别，自然没法拿到prop1。

不过你想简化$store.state.x.data.y.prop1这种冗长写法的思路是对的，下面给你几种靠谱的替代方案：

推荐方案1：用计算属性封装（最常用） #

在组件的计算属性里把getter返回的对象存起来，这样模板里就能轻松调用：

// 组件的script部分
export default {
  computed: {
    scopedObject() {
      // 直接返回getter对应的对象
      return this.$store.getters['x/y']
    }
  }
}

模板里就可以这么写，清晰又简洁：

<div>
  <p>{{ scopedObject.prop1 }}</p>
</div>

而且计算属性会自动缓存结果，只有当getter依赖的state发生变化时才会重新计算，性能也有保障。

方案2：模板中直接访问getter #

如果只是偶尔用到这个对象的属性，不想写计算属性的话，也可以直接在模板里调用getter：

<div>
  <p>{{ $store.getters['x/y'].prop1 }}</p>
</div>

这种写法最直接，适合简单场景。

方案3：用mapGetters辅助函数批量引入 #

如果你的组件需要用到多个Vuex getter，用mapGetters可以让代码更整洁：

// 组件的script部分
import { mapGetters } from 'vuex'

export default {
  computed: {
    // 把getter 'x/y'映射为组件内的scopedObject属性
    ...mapGetters({
      scopedObject: 'x/y'
    })
  }
}

模板里同样可以直接使用{{ scopedObject.prop1 }}，和方案1的效果一样。

总的来说，核心是要把getter返回的对象注入到组件的作用域中，要么通过计算属性，要么直接在模板里访问，v-bind做不到这一点，所以最初的写法没法实现你的需求。

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