如何在HTML中应用Vuex getters来获取数据？

在HTML中应用Vuex getters来获取数据通常涉及到两个步骤：首先，在Vue组件内通过`this.$store.getters`来访问getter函数；其次，将计算出来的数据绑定到元素上。

1. **定义Vuex getters**: 在你的Vuex store中，创建一个getter。例如，假设你有一个名为`userDetails`的getter，它从state中提取用户详细信息：

// store/index.js
export default new Vuex.Store({
  state: {
    user: { ... }
  },
  getters: {
    userDetails: (state) => state.user
  }
})

2. **在模板中使用getter**：在你的Vue组件里，导入并使用这个getter：

<!-- YourComponent.vue -->
<template>
  <div>
    <h1>User Details:</h1>
    <p>Name: {{ userDetails.name }}</p> <!-- 这里会显示user.name -->
    <!-- 更多属性同理 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['userDetails']) // 使用mapGetters自动映射getter到组件的计算属性
  }
}
</script>

在这里，`mapGetters`来自`vuex`插件，它帮助我们在组件内部自动解耦对store的直接依赖。