关于Vuex-------state,mapstate

之前一直不理解vuex那些事儿，虽然会用，但总是一知半解 ， 前两天看了vuex官网上的官方视频讲解（可惜是英文的，不过所幸还能接受）。如果英语还可以的小伙伴建议去看一下。
vuex就像是一个统一的状态或是数据管理仓库，虽然在vue里面，父子组件之间可以相互传递数据，当时对于平级的兄弟组件是不行的，so , 你get到这个用处了吗？

首先

先说明三个用于展示功能的文件app.vue，main.js，store.js ， 以下展示main.js和store.js初始内容。

//新建store.js
import Vuex from "vuex"
import Vue from "vue"
Vue.use(Vuex)
export defaut new Vuex.Store({
	
})

//在main.js里引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

state

单一状态树，在state中设置属性及原始值 ，当然这里只是一个存储数据的仓库，并不能作任何计算操作。

//新建store.js
export defaut new Vuex.Store({
	state:{
		count:0
	}
})

//在app.vue中使用state里的数据
<template>
	<div>{{ count }}</div>
</template>
<script>
export defaul {
	data(){
		return{}
	},
	computed:{
		count(){
			return this.$store.state.count;
		}
	}
}
</script>

mapstate

当需要调用state中多个数据时，逐个计算未免显得有点多余了，mapstate辅助函数可以帮助解决这个尴尬的问题。这里有两种方式可以实现。

//新建store.js
export defaut new Vuex.Store({
	state:{
		count:0，
		msg:"Hellow world"
	}
})

//在app.vue中使用state里的数据
<template>
	<div>{{ count }}</div>
	<div>{{ msg}}</div>
</template>
<script>
import { mapstate } from "vuex"
export defaul {
	data(){
		return{}
	},
	computed:mapstate({
		count:state=>state.count	//通过箭头函数设置
		otherCount:"count"		//字符串参数和上面的箭头函数是一样的效果，
		//如果你的项目中有局部状态需要涉及到store中的数据的话
		innerCount(state){
			return state.count+this.basicCount
		}
	})
	}
}
</script>
/*
或者当vue中映射的属性名与state中的都一致时，可直接使用数组设置。
computed:mapstate([
"count"			//相当于把store中state.count 赋值给this.count
])
*/