019-Vuex状态管理

一、Vuex简介

vue应用程序的状态管理模式。他采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。
vuex包含部分

1. View
2. Actions
3. Mutations
4. State
   一句话总结上图：
   每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
   Vuex模块间可以共享状态。vue组件dispatch发送事件触发Actions，
   Actions可以进行异步请求，再去通过commit触发Mutations，Mutations只可以
   同步操作仓库中的数据
   mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

二、安装

npm install vuex --save
若开发的是多页面，且使用的vue是通过script引入的，那么在引入vue.js
之后再引入vuex.js。

三、使用

1、在入口文件main.js中引入

import Vuex from ‘vuex’;

2、全局注册使用

Vue.use(Vuex);

3、实例化数据中心store

import Vue from 'vue';
import Vuex from 'vuex';
import Store from './store';
...
// 温馨提示：只有在导入vue、vuex之后才能实例化store
let store = new Vuex.Store(Store);
...

若数据量比较大时，可以将store单独抽取为一个模块。
下面是官方给出结构示例：
https://vuex.vuejs.org/zh/guide/structure.html

在官方给出结构的基础上剥离了state，把他和actions放在同一文件层级下。
A、index.js 导出store。

import state from './state';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
export default {
	state ,
	getters ,
	actions ,
	mutations 
};

B、state.js

export default {
	orderList: [],
	params: {}
}

C、actions.js 异步请求api接口

const actions = {
	fetchOrderList ({ commit , state}) {
		axios.get('/api/getOrderList', { state.params } )
		.then(res => {
			commit('updateOrderList' ,  res.data.list);
		}).catch(err => {
			
		})
	}
}

D、mutations.js 同步动作

const mutations = {
	updateOrderList (state , payLoad) {
		state.orderList = payLoad;
	},
	/*updateParams (state , payLoad ) {
		state.params[payLoad.key] = payLoad.val; 
	},*/
	updateParams (state , { key ,val } ) {
		state.params[key] = val; 
	},
}

E、getters.js 获取state的数据

const getters = {
	getOrderList: state => state.orderList
}

4、放到vue实例中使用

 new Vue({
	el: '#app' ,
	store ,
	router , 
	component: { Layout } ,
	template: '<Layout />'
});

5、组件中使用store的方法

1、异步数据更改
A、计算属性
computed () {
	// 动态的获取数据
	tableData () {
		// this.$store store对象
		return this.$store.getters.getOrderList
	}
}
B、主动调用actions进行赋值
mounted () {
	// 请求结果的修改
	this.$store.dispatch('fetchOrderList ');
}
C、组件的渲染
<view v-for="item in tableData" >
	<view>{{ item.name }}</view>
</view>
2、同步数据的更改
A、结构
<view v-for="item in ['m','w']" @click='changeType(item)'>类型更改</view>
B、初始化type值
data () {
	return {
		type: 'm'
	}
}
C、更改type值的逻辑处理
methods	{
	changeType (str) {
		this.$store.commit('updateParams',{
			key: 'type', // data对象下要更改的属性名
			val: str
		});
		this.$store.dispatch('fetchOrderList ');
	},
}

dispatch、commit等方法详情，请查看官方文档：
https://vuex.vuejs.org/zh/api/#vuex-store