通过之前博文中的内容可以看出,每次写代码都要写一大堆相同的方法像这种
increment(){
console.log(this.$store)
this.$store.commit('JIA',this.n)
},
decrement(){
this.$store.commit('JIAN',this.n)
},
这种类型明明就是简单的引入数据到vue里面,代码也几乎一样,我们可以调用vuex的几个简单的引用简写方法
两种简写,一种简写数据,一种简写方法
1.简写数据
对于下面的引入数据方法,是十分麻烦的,我们可以通过以下方法进行简写$store.state这几个前缀
<h3>原来的引入演示数据{{$store.state.sum}}</h3>
首先很简单的,我们可以直接在计算属性中绑定相应的数据,这样子我们就可以直接用 sum 这个单词就可以调用数据了
computed:{
sum(){
return this.$store.state.sum
},
}
但是当数据多的时候就也会显得麻烦,我们就可以通过引入mapState和mapGetters方法进行简写
第一步自然是引入
import {mapState,mapGetters} from 'vuex'
第二部就是压缩数据
原来的话是这样
sum(){
return this.$store.state.sum
},
name(){
return this.$store.state.name
},
age(){
return this.$store.state.age
},
//getters调用数据方法
bigSum(){
return this.$store.getters.age
}
通过压缩的方式变为这样
computed:{
//如何用mapState进行简写上面的内容,
//...是es6语法,因为computed是对象,所以不能在对象里面引入对象,需要加...
// ...mapState({'sum':'sum','name':"name",'age':"age"}),
//进一步进行简写(数组写法)
...mapState(['sum',"name","age","personList"]),
//同理,用mapGetters进行简写
...mapGetters(['bigSum']),
}
这样就可以对庞大的计算方法进行简写了,通过这样子修改后,我们也不用$store.state.sum这样引入数据了
2.简写方法
跟简写数据一样,也可以通过映射来简写方法
import {mapMutations,mapActions} from 'vuex'
原来的写法
methods:{
//直接调用commit
increment(){
this.$store.commit('JIA',this.n)
},
decrement(){
this.$store.commit('JIAN',this.n)
},
//调用dispatch方法
incrementOdd(){
if(this.$store.state.sum%2){
this.$store.dispatch('jiaOdd',this.n)
}
},
incrementWait(){
setTimeout(()=>{
this.$store.dispatch('jiaWait',this.n)
},500)
},
}
简写后的表达形式
//mapMutations简写方式
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//mapActions简写方式
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
注意的是,原来写法的传入数据已经没办法写入,所以我们需要在调用这些函数的时候进行调用
//调用这些方法的时候就要把数据写上,如下面的n
<button @click="increment(n)">+1</button>
演示效果
组件间如何利用这个东西进行通信??
我们只要直接引入就可以了
比如说这个组件修改了vuex的personList
我们只要直接将personList引入这个需要调用的地方就可以了
//引入
...mapState(['sum',"name","age","personList"]),
//使用
div>最新的名字是{{personList[0].name}}</div>