（四）Vuex 中的计算属性getters
（四）Vuex 中的计算属性getters
老怪兽
发布于 2023-02-22 19:05:00
发布于 2023-02-22 19:05:00
代码可运行
运行总次数：0
代码可运行
Vuex 中的计算属性 getters
说明
可以把 veux 中的 getters 当成计算属性，他定义在全局状态管理中，一来可以复用逻辑代码，二来可以减少组件的代码量
一、定义 getters 方法
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中的名字来获取
<!-- 因为 getters 就跟计算属性一样，使用的时候不用加括号 -->
<p v-for="user in $store.getters.usersOlderThan26">
user: <span>{{ user }}</span>
</p>- 使用
getters的第二中方式
<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
getters: {
// 筛选出所有大于23的人
usersOlderThan23(state) {
return state.users.filter((user) => user.age > 23);
},
// 调用其他的getters 也是把他当成普通数据来使用不用加括号
numberOfUsersOlderThan23(state, getters) {
return getters.usersOlderThan23.length;
}
}四、用户传递参数自定义计算条件
getters: {
usersOlderThan(state) {
// 通过返回一个方法去让用户自己也条件
// 这种情况不会缓存结果
return (age) => state.users.filter((user) => user.age > age);
}
}- 使用传参
<!-- 因为 usersOlderThan 返回的是一个函数，所以可以直接调用传参-->
<p v-for="user in usersOlderThan(25)">
user: <span>{{ user }}</span>
</p>
<script>
computed: mapGetters([
"usersOlderThan26",
"numberOfUsersOlderThan26",
"usersOlderThan",
])
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月15日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
