在 Vue.js 应用中，Vuex 是一种用于集中管理应用状态的状态管理工具。Vuex 中的 getters 允许你在获取 state 中的数据时进行一些计算或处理。通常，getters 可以用于从 store 中获取派生的状态，类似于计算属性。
在 Vuex 中，getters 是 store 的一部分，可以在 store 文件夹下的 getters.js 文件中定义。这个文件通常包含一系列的 getter 函数。
下面是一个简单的 getters.js 文件的例子：
// getters.js export default { // 示例 getter，用于获取用户的姓名 getUserName: state => { return state.user.name; }, // 示例 getter，用于获取用户的年龄 getUserAge: state => { return state.user.age; }, // 示例计算 getter，用于获取用户是否成年 isUserAdult: (state, getters) => { return getters.getUserAge >= 18; } };
在上面的例子中，有三个 getters 分别是 getUserName、getUserAge 和 isUserAdult。这些 getters 可以通过 this.$store.getters 或在组件中的计算属性中访问。
在组件中使用这些 getters 的示例：
// MyComponent.vue <template> <div> <p>User Name: {{ userName }}</p> <p>User Age: {{ userAge }}</p> <p>User is Adult: {{ userIsAdult }}</p> </div> </template> <script> export default { computed: { // 使用 getters userName() { return this.$store.getters.getUserName; }, userAge() { return this.$store.getters.getUserAge; }, userIsAdult() { return this.$store.getters.isUserAdult; } } }; </script>
通过使用 getters，你可以在获取 store 中的数据时执行一些逻辑，而不仅仅是简单地获取原始的 state 数据。这对于在应用中进行复杂的状态计算或转换非常有用。
