Vuex 中的计算属性 getters
说明
可以把 veux 中的 getters 当成计算属性，他定义在全局状态管理中，一来可以复用逻辑代码，二来可以减少组件的代码量
一、定义 getters 方法
代码语言：javascript
复制
import { createApp } from "vue"; import { createStore } from "vuex"; import App from "./App.vue";const store = createStore({
state() {
return {
users: [
{
id: 1,
name: "John",
age: 25,
}
],
};
},
getters: {
// 筛选出所有大于23的人
usersOlderThan23(state) {
return state.users.filter((user) => user.age > 23);
}
},
});
const app = createApp(App);
app.use(store);
app.mount("#app");
二、使用 getters
- 通过
this.$store.getters.getters中的名字来获取
代码语言：javascript
复制
<!-- 因为 getters 就跟计算属性一样，使用的时候不用加括号 -->
<p v-for="user in $store.getters.usersOlderThan26">
user: <span>{{ user }}</span>
</p>- 使用
getters的第二中方式
代码语言：javascript
复制
<script>
// 直接使用映射数组中的名字 usersOlderThan23
<p v-for="user in usersOlderThan26">
user: <span>{{ user }}</span>
</p>
// getters vue 同样也提供了 映射函数
import { mapGetters } from 'vuex'
export default {
// 也是通过 computed 来访问
computed: mapGetters(['usersOlderThan23'])
}
</script>
三、getters 中的第二个参数
- 在
geters中的第二个参数可以传递其他所有的getters
代码语言：javascript
复制
getters: {
// 筛选出所有大于23的人
usersOlderThan23(state) {
return state.users.filter((user) => user.age > 23);
},
// 调用其他的getters 也是把他当成普通数据来使用不用加括号
numberOfUsersOlderThan23(state, getters) {
return getters.usersOlderThan23.length;
}
}四、用户传递参数自定义计算条件
代码语言：javascript
复制
getters: {
usersOlderThan(state) {
// 通过返回一个方法去让用户自己也条件
// 这种情况不会缓存结果
return (age) => state.users.filter((user) => user.age > age);
}
}- 使用传参
代码语言：javascript
复制
<!-- 因为 usersOlderThan 返回的是一个函数，所以可以直接调用传参-->
<p v-for="user in usersOlderThan(25)">
user: <span>{{ user }}</span>
</p>
<script>
computed: mapGetters([
"usersOlderThan26",
"numberOfUsersOlderThan26",
"usersOlderThan",
])
</script>
