vue中的状态管理应用

vue.js官网中生态系统中给我们提供一个官方的插件vuex,利用这个插件我们可以集中式管理数据，一处修改，多处应用，多个组件依赖同一状态。主要应用于开发中大型项目。

首先：npm i vuex -S

引入插件  import Vuex from 'vuex'

Vuex是个对象，相关成员如下

成员	用途
Store	类，构造状态管理的实例
mapActions	函数，通讯工具
mapMutations	函数，通讯工具
mapGetters	函数，通讯工具
mapState	函数，通讯工具

状态管理 store实例相关成员

成员	用途
dispatch	实例方法，通讯工具
commit	实例方法，通讯工具
state	属性，获取公共数据

交互流程

components->	actions->	mutations->	state	<-getters->	->components
发送请求	处理业务,异步	修改状态	状态	读取处理状态	渲染状态
dispatch	commit	state.key=value	{key:value}	state.key	{{key}}
mapActions->					<-mapGetters
mapMutations->	------------------->			<------------	<-mapState
commit->	------------------->
				<------------	<-state

基础应用：

1、新建一个js文件 ：// src/plugins/vuex.js

//配置 store
import Vue from 'vue';
import Vuex from 'vuex';//引入vuex包
Vue.use(Vuex);//安装插件到vue

import state from '../store/state.js'
import actions from '../store/actions.js'
import mutations from '../store/mutations.js'
import getters from '../store/getters.js'

let store = new Vuex.Store({//配置接受state等选项，值为对象
  state,mutations,
  getters,actions
});

export default store;//导出store实例给main.js

2、在main.js引入store实例

import store from './plugins/vuex.js'

new Vue({
  render: h => h(App),
  store//控制vue实例，为vue实例提供一个状态管理实例，管理整个vue公共状态
}).$mount('#app')

3、在// src/store/目录下打造state.js 、actions.js、mutations.js、getters.js。

let state={
  count:0
}

export default state;

let actions = {
  add:({commit,state},payload)=>{
   	//state 公共状态 payload 负载
    commit('increment',payload)
  }
};
export default actions;

let mutations={
  increment:(state,payload)=>{
    //state 仓库|公共数据 payload携带的负载
    state.count+=payload;//mutations 不做业务,只负责突变state
  }
};

export default mutations;

let getters = {
  count:(state)=>{
    //返回处理后的state  ~~ computed  
    return state.count % 2 === 0 ? state.count + '偶数': state.count + '奇数'
  }
};
export default getters;

在组件中的应用

<!--声明式 发送请求-->
<div @click="类型(负载)"></div>

<!--展示状态-->
<div>{{$store.state.count}}</div>
<div>{{count}}</div>

  import {
		mapActions,
		mapMutations,
		mapState,
		mapGetters
	} from 'vuex'
	import store from '../plugins/vuex.js';
	export default {
		name: 'app',
		methods: {
			add() { //编程式 发送请求 
				store | this.$store.dispatch('add', 2) //-> actions
				//store | this.$store.commit('increment',2)    //-> mutations
				//store | this.$store.dispatch|commit({type:'类型',payload:负载})
			}
		},

		//mapActions 用来接管methods,返回一个对象
		// methods:mapActions([
		//  'add'
		//])

		//mapMutations 接管methods,跳过actions找mutations
		//methods:mapMutations([
		//    'increment'
		// ])

		// methods: {
		// 	...mapMutations([ //mapMutations 返回来一个对象
		// 		'increment'
		// 	]),
		// 	...mapActions(['add']), //mapActions 返回来一个对象

		// 	show() { //组件内部methods
		// 		...
		// 	}
		// },

		//mapGetters接管computed，返回一个对象
		// computed: mapGetters([
		// 	'count'
		// ]),

		// computed: mapState([
		// 	'count'
		// ]),
		computed: {
			// ...mapState([ //mapState返回一个对象
			// 	'count'
			// ]),
			...mapGetters([
				'count'
			]),

			// count() { //组件内容计算属性
			// 	return this.$store.state.count % 2 === 0 ?
			// 		this.$store.state.count + '偶数' :
			// 		this.$store.state.count + '奇数'
			// }
		}
	}  

状态管理主要是把握store里面的几个成员的交互流程！！！

注意一点在组件中的应用是否要加payload参数，依据methods中使用的那种请求方式（编程式发送请求，传payload参数；如果是mapMutations、mapActions接管methods,在调用处传参）