Vue学习第23天 —— Vuex中getters详细讲解及使用案例,与computed计算属性对比
Vuex中getters详细讲解及使用案例,与computed计算属性对比
目录
前言
这篇文章表示已经掌握vuex的相关知识,如不了解,点击:Vuex安装使用详解及案例练习(彻底搞懂vuex)
文章看完可以看4个map方法,点击:Vuex中的4个map方法的基本用法及案例练习
一、getters相关知识
1、作用
当state中的数据需要经过加工之后再使用,我们可以使用getter来加工
2、理解
在项目中,getter是为简化数据而生
二、配置getters
1、在store/index.js文件中追加getters配置
...
const getters = {
//bigSum为自定义名称
bigSum(state) {
return state.sum * 10
}
}
//向外暴露
export default new Vuex.Store({
...
getters
})
2.组件中读取数据
$store.getters.bigSum
三、getters案例练习
需求:将state中的数据放大十倍在页面中显示
1、index.js中代码
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex)
//actions用于响应组件中用户的动作
const actions = {
//数据需要业务逻辑判断
odd(context,num){
if(context.state.sum % 2 != 0) {
context.commit("ODD",num)
}
}
};
//mutations用于修改state中的数据
const mutations = {
ADD(state,num){
state.sum +=num;
},
ODD(state,num){
state.sum +=num;
}
};
//state保存sum数据
const state = {
sum:0,
};
const getters = {
bigSum(state) {
return state.sum * 10
}
}
//store管理以上三个对象,并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
2、count组件代码
<template>
<div>
<h3>当前求和为:{{$store.state.sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="addNum">+</button>
<button @click="oddNum">sum为奇数再加</button>
<h3>将sum放大十倍后的和为:{{$store.getters.bigSum}}</h3>
</div>
</template>
<script>
export default {
name: 'Count',
data(){
return {
num:1
}
},
methods:{
selectNum(){
this.num = Number(event.target.value)
},
addNum(){
this.$store.commit("ADD",this.num)
},
oddNum(){
this.$store.dispatch("odd",this.num)
}
}
}
</script>
<style>
button {
margin-left: 5px;
}
</style>
3、运行结果
4、案例总结
1、getters得到的数据是在vuex中的getters中
(我们可以看到在开发者工具中)
2、getters中的函数必须有返回值
3、控制台输出getters如图
四、以上案例通过computed计算属性实现
1、index.js代码
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex)
//actions用于响应组件中用户的动作
const actions = {
//数据需要业务逻辑判断
odd(context,num){
if(context.state.sum % 2 != 0) {
context.commit("ODD",num)
}
}
};
//mutations用于修改state中的数据
const mutations = {
ADD(state,num){
state.sum +=num;
},
ODD(state,num){
state.sum +=num;
}
};
//state保存sum数据
const state = {
sum:0,
};
//store管理以上三个对象,并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
2、count组件代码
<template>
<div>
<h3>当前求和为:{{$store.state.sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="addNum">+</button>
<button @click="oddNum">sum为奇数再加</button>
<h3>将sum放大十倍后的和为:{{bigSum}}</h3>
</div>
</template>
<script>
export default {
name: 'Count',
data(){
return {
num:1
}
},
methods:{
selectNum(){
this.num = Number(event.target.value)
},
addNum(){
this.$store.commit("ADD",this.num)
},
oddNum(){
this.$store.dispatch("odd",this.num)
}
},
computed: {
bigSum() {
return this.$store.state.sum *10
}
}
}
</script>
<style>
button {
margin-left: 5px;
}
</style>
两者实现效果相同
五、getters与computed区别
通过以上案例,我们可以发现vuex中的getters能实现的,通过computed配置项也能实现,那么getters存在的意义是?
比如一个过滤后的求和数据filterSum,如果很多组件都要使用filterSum这个数据,那么比起在需要用到的组件中一遍遍computed,我们为何不把这个数据抽离出来共享呢?
这是vuex中getters存在的意义,我们也可以理解为getters是store的计算属性
六、进阶学习
getter会暴露为$stoer.getters对象,其实我们有两种方法获取这些值
1、通过属性获取
上面案例是通过属性获取的:$store.getters.bigSum
getter函数可以接收两个参数,第一个参数是state,第二个参数可以是其他getter
getters: {
// ...
bigSum(state, getters) {
return getters.value*10
}
}
2、通过方法获取
可以通过让 getter 返回一个函数,来实现给 getter 传参
使用场景:对store中的数据进行查询时非常有用
getters: {
// ...
getTodoById: (state) => (id) => {
return state.sum.find(todo => todo.id === id)
}
}
组件中使用:store.getters.getTodoById(5)
3、两者区别
① getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的
② getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果
更多推荐
所有评论(0)