vuex store

管理状态，共享数据，在各个组件之间管理外部状态

Vuex store 使用

1. 引入并通过 use 方法使用

2. 创建状态仓库

var store = new Vuex.Store({
  state: {
	isLogin: true
  }
})

3. 通过 this.$store.state.xxx 拿到数据

Vuex 的相关操作

vuex 状态管理流程

view --> actions --> mutations --> state --> view

直接通过 mutations 改变状态

var store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
	addCount(state) {
	  state.count ++
	}
  }
})

调用方法：
this.$store.commit('addCount')

通过 actions 可以异步改变状态

var store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
	addCount(state) {
	  state.count ++
	}
  },
  actions: {
	addCountAction(context) {
	  context.commit('addCount')
    },
	// ES6
	// addCountActions({commit}) {
	//   commit('addCount')
	// }
  }
})

调用方法：
this.$store.dispatch('addCountAction')

actions 提交的是 mutations，而不是直接变更状态，并且可以包含异步操作，但是 mutations 只能包含同步操作。

getters 计算属性

getters: {
  getCount(state) {
	return state.count > 0 ? state.count : 0
  }
}

获取方法：
this.$store.getters.getCount

通过获取 getters，可以得到经过处理的 state 状态。