Vuex：初始（二）

Vuex中的mapState和mapAction

关于这两个单词，我查阅资料以及学习之后发现，这两个类其实可以称得上是辅助函数，为了简化Vuex中actions和mutations。

mapState、mapAction
没接触这个函数的时候，我们获取state的方法为。
this.$store.state.xxx

例子：
假设在Vuex的store中定义 state：{ city：南京}
在组件A中

//不用辅助函数
 <div class="test">
      尝试获取vuex中得值：{{this.$store.state.city}}
 </div> 
    
//用辅助函数
<div class="test">
      尝试获取vuex中得值：{{this.city}}
</div>
//当然在此组件下必须引入对应的辅助函数名：import { mapState } from 'vuex'
//其中在计算属性中使用函数  
computed:{
	...mapState(['chengeCity'])
}
//至于为什么要放在这里，个人理解是利用计算属性保存值得特性减少重复得交互

接下来在B组件中改变这个city

//定义一个点击事件为 shows
methods:{
	shows(){
	//不使用辅助函数
	this.$store.dispatch('changeCity','洛阳')
	//使用辅助函数
	this.changeCity('洛阳')
}
//在方法外加上(使用辅助函数)
...mapAction(['changeCity']),
}

总结一下：
mapState是为了在state中有多个状态值时简化操作，其本质也是获取Vuex中state中得值，mapAction是在dispatch分发过程中简化步骤

要注意得时：
mapActions放到methods下并且还需要…符号暂时没有理解。

//https://www.jianshu.com/p/710a93d591a7