每次获取store里面的值,我们都是这么写的
<h2>结果是:{{$store.state.sum}}</h2>
<h2>sum做处理的结果是:{{$store.getters.bigSum}}</h2>
<h2>结果是:{{$store.state.sum}}</h2>
<h2>年龄:{{$store.state.name}}</h2>
<h2>名字:{{$store.state.age}}</h2>
<h2>学校:{{$store.state.shool}}</h2>
<h2>地址:{{$store.state.addr}}</h2>
为了省略掉$store.state,我们可以写成计算属性的模式
computed:{
he(){
return this.$store.state.sum
},
xuexiao(){
return this.$store.state.shool
},
dizhi(){
return this.$store.state.addr
},
mingzi(){
return this.$store.state.name
},
nianling(){
return this.$store.state.age
}
}
展示部分
<h2>结果是:{{he}}</h2>
<h2>年龄:{{nianling}}</h2>
<h2>名字:{{mingzi}}</h2>
<h2>学校:{{xuexiao}}</h2>
<h2>地址:{{dizhi}}</h2>
<h2>计算属性处理:{{he}}</h2>
这就可以省略展示部分的this.$store.state
- vuex有mapState方法,可以在computed中简写一些计算属性
首先打印mapState
mounted(){
console.log(mapState({he:'sum',xuexiao:'shool'}))
},
//{he: ƒ, xuexiao: ƒ}
这一个返回值是一个对象
这个结果要写在computed对象里面,所我们用对象展开运算符(...mapState)
computed:{
//对象写法,这个mapState可以使其生成计算属性,从state中获取数据,
//键就是生成的函数名,值就是state对象的属性名
...mapState({he:'sum',xuexiao:'shool',dizhi:'addr',mingzi:'name',nianling:'age'})
},
模板展示
<h2>结果是:{{he}}</h2>
<h2>年龄:{{nianling}}</h2>
<h2>名字:{{mingzi}}</h2>
<h2>学校:{{xuexiao}}</h2>
<h2>地址:{{dizhi}}</h2>
数组写法:
// 函数名和属性名相等时,可以用数组的简写模式
...mapState(['sum','shool','addr','name','age'])
模板展示
<h2>结果是:{{sum}}</h2>
<h2>年龄:{{name}}</h2>
<h2>名字:{{shool}}</h2>
<h2>学校:{{addr}}</h2>
<h2>地址:{{age}}</h2>
mapGetters
同理,展示的是
<h2>sum做处理的结果是:{{$store.getters.bigSum}}</h2>
在计算属性中可以写
bigSum(){
return this.$store.getters.bigSum
},
简写
import { mapState,mapGetters } from 'vuex'
// 对象写法
...mapGetters({bigSum:'bigSum'})
// 数组写法
...mapGetters(['bigSum'])
展示
<h2>getters数据:{{bigSum}}</h2>
网友评论