[JavaScript知识库]vue中vuex的使用（3）----读数据和改数据如何简写以及组件间通信

通过之前博文中的内容可以看出，每次写代码都要写一大堆相同的方法像这种

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>