VUEX基本用法

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

Vuex的核心

vuex由以下几部分组成：
1、state:状态对象。数据存储的位置，定义好数据的存储类型
2、mutations:触发状态。同步的往仓库中存值
3、getters:从仓库中取值的时候用到
4、actions:异步的往仓库中存值
5、modules:Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、

	const state = {
	  count: 4
	}
	
	const mutations = {
	  jia(state,n) {
	    state.count+n
	  },
	  jian(state,n) {
	    state.count-n
	  }
	}
	
	const getters={
	  count:function(state){
	    return state.count+20
	  }
	}
	
	const actions={ //异步存取
	  jiaPlus(context){ // 参数context固定写法
	    context.commit('jia',5)
	  },
	  jianPlus({commit}){
	    commit('jian')
	  }
	}
	
	export default new state({
	  state,
	  mutations,
	  getters,
	  actions,
	})

取值:{{$store.state.count}}

state的用法:
	import { mapState } from 'vuex'
	export default ({
	  computed: mapState([
	    'count'
	  ])
	})


mutations用法:store.commit('jia',10)
	import { mapState , mapMutations} from 'vuex'
	export default ({
	  computed: mapState([
	    'count'
	  ]),
	  methods:mapMutations([
	    'jian'
	  ])
	})

getters用法:
	import { mapState , mapMutations , mapGetters} from 'vuex'
	export default ({
	  computed: {
	    ...mapState([
	      'count'
	    ]),
	    // count(){
	    //   return this.$store.getters.count
	    // },
	    ...mapGetters([
	      'count'
	    ]),
	  },
	  methods:mapMutations([
	    'jian'
	  ])
	})