Vuex Getter使用

发布时间：2023-04-03 14:04:30 所属栏目：教程来源：

导读：本小节我们将介绍 Vuex 中 getter 的使用方式。包括如何定义 getter、使用 getter、辅助函数 mapGetters 的使用。Getter 在项目中的使用非常普通，学会使用 Getter 可以避免我们重复的通过 state 获取数据。同学们在

本小节我们将介绍 Vuex 中 getter 的使用方式。包括如何定义 getter、使用 getter、辅助函数 mapGetters 的使用。Getter 在项目中的使用非常普通，学会使用 Getter 可以避免我们重复的通过 state 获取数据。同学们在学完本小节后可以多尝试写一些 Getter 来巩固本节的知识点。

Vuex 允许我们在 store 中定义 “getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，而且只有当它的依赖值发生了改变才会被重新计算。— 官方定义

我们可以把 Getter 理解成是封装好的获取数据的方法，在方法内部我们可以对 state 中的数据做一些相应的处理，最后返回我们想要的数据。

Getter 接受 state 作为其第一个参数，我们可以对 state 中的数据做相应的处理，最终返回我们想要的数据：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="item in skillList" :key="item.name">{{item.name}}</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
const store = new Vuex.Store({
state: {
name: '句号',
age: ,
skill: [
{name: 'Vue', type: },
{name: 'React', type: },
{name: 'JAVA', type: },
{name: 'Webpack', type: },
{name: 'Node', type: }
]
},
getters: {
skillList: state => {
return state.skill.filter(item => item.type === )
}
}
})
var vm = new Vue({
el: '#app',
store,
computed: {
skillList() {
return this.$store.getters.skillList
}
}
})
</script>
</html>
代码解释：
JS 代码第 16-20 行，我们定义了 Getter 方法 skillList，skillList 内部我们返回状态 skill 中 type 为 1 的数据。
JS 代码第 26-28 行，我们通过 $store.getters 获取 skillList 的返回值。

Getter 也可以接受其他 getter 作为第二个参数：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-for="item in skillList" :key="item.name">{{item.name}}</div>
<div>我有 {{count}} 个技能包</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
const store = new Vuex.Store({
state: {
name: '句号',
age: ,
skill: [
{name: 'Vue', type: },
{name: 'React', type: },
{name: 'JAVA', type: },
{name: 'Webpack', type: },
{name: 'Node', type: }
]
},
getters: {
skillList: state => {
return state.skill.filter(item => item.type === )
},
skillCount: (state, getters) => {
return getters.skillList.length
},
}
})
var vm = new Vue({
el: '#app',
store,
computed: {
skillList() {
return this.$store.getters.skillList
},
count() {
return this.$store.getters.skillCount
}
}
})
</script>
</html>
代码解释
JS 代码第 16-23 行，我们定义了 Getter 方法 skillList 和 skillCount，skillList 内部我们返回 skill 数据中 type 为 1 的数组，skillCount 内部我们通过 getters 获取 skillList 的数组长度。
JS 代码第 28-30 行，我们通过 $store.getters 获取 skillList 的返回值。
JS 代码第 31-33 行，我们通过 $store.getters 获取 skillCount 的返回值。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!