vue2-Vuex

1.Vuex-基本使用

(1)什么是Vuex?

vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据。

(2)注意点:

必须在引入Vue之后再引入Vuex。
只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上。

(3)Vuex出现的原因：（解决方案: 使用Vuex）

①　如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)。
②　兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)

2.Vuex-共享数据（store）

(1)引入vuex

(2)创建Vuex对象

const store = new Vuex.Store({
// 这里的state就相当于组件中的data, 就是专门用于保存共享数据的
state: {
msg: “知播渔”
},
});

(3)在组件中添加store的key保存vuex对象（store: store）

在祖先组件中添加store的key保存Vuex对象，只要祖先组件中保存了Vuex对象 ,
那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了。
Vue.component(“grandfather”, {
template: “#grandfather”,
store: store,
// 爸爸组件
components: {
“father”: {
template: “#father”,
// 儿子组件
components: {
“son”: {
template: “#son”,
}
}
}
}
});

(4)使用vuex中保存的共享数据（this.$store.state.msg）

	<template id="grandfather">
		<div>
			<p>{{this.$store.state.msg}}</p>
			<father></father>
		</div>
	</template>
	<template id="father">
		<div>
			<p>{{this.$store.state.msg}}</p>
			<son></son>
		</div>
	</template>
	<template id="son">
		<div>
			<p>{{this.$store.state.msg}}</p>
		</div>
	</template>

3.Vuex-修改共享数据（mutations）

(1)引入vuex

	<script src="js/vue.js"></script>
	<!--注意点: 在导入Vuex之前必须先导入Vue-->
	<script src="js/vuex.js"></script>

(2)创建Vuex对象

	const store = new Vuex.Store({
		// state: 用于保存共享数据
		state: {
			count: 0
		},
		// mutations: 用于保存修改共享数据的方法
		mutations: {
			// 注意点: 在执行mutations中定义的方法的时候, 系统会自动给
			这些方法传递一个state参数，state中就保存了共享的数据
			mAdd(state){
				state.count = state.count + 1;
			},
			mSub(state){
				state.count = state.count - 1;
			}
		}
	});

(3)在组件中调用vuex中的方法修改vuex中的数据（this.$store.commit(“mAdd”);）

注意点: 在Vuex中不推荐直接修改共享数据
如果多个组件都修改了共享的数据, 那么后期数据发生了错误,
我们如果需要去调试错误，就需要把每一个修改了共享数据的组件都检查一遍,
这样非常低效, 非常的不利于我们去维护。

	Vue.component("father", {
		template: "#father",
		store: store,
		// 儿子组件
		components: {
			"son1": {
				template: "#son1",
				methods: {
					add() {
						// 注意点: 在Vuex中不推荐直接修改共享数据
						this.$store.commit("mAdd");
					},
					sub() {
						this.$store.commit("mSub");
					}
				}
			},
			"son2": {
				template: "#son2",
				methods: {
					add() {
						this.$store.commit("mAdd");
					},
					sub() {
						this.$store.commit("mSub");
					}
				}
			}
		}
	});

(4)将mutation中的方法保存为常量的形式，以便actions调用排错

新建一个mutation-type文件，专门用于保存mutation中的方法名。
Mutation中使用变量做完方法名，要加[ ]

	import { CHANGE_FULL_SCREEN, CHANGE_MINI_PLAY } from './mutation-type'
	export default {
	  [CHANGE_FULL_SCREEN] (state, flag) {
	    state.isfullScreen = flag
	  }

4.触发mutations中保存共享数据的方法（actions）

(1)创建actions

mutations: 用于保存修改全局共享的数据的方法

	mutations: {
	  changeFullScreen (state, flag) {
	    state.isFullScreen = flag
	  }
	},

actions: 用于保存触发mutations中保存的方法的方法

	actions: {
	  setFullScreen ({ commit }, flag) {
	    commit('changeFullScreen', flag)
	  }
	}

(2)使用actions

	this.$store.dispatch('setFullScreen', true);

(3)mapActions

Actions.js文件

	import { CHANGE_FULL_SCREEN, CHANGE_MINI_PLAY } from './mutation-type'
	export default {
	  setFullScreen ({ commit }, flag) {
	    commit(CHANGE_FULL_SCREEN, flag)
	  },
	}

使用时：

	import { mapActions, mapGetters } from 'vuex'
	methods: {
		...mapActions(['setFullScreen', 'setMiniPlay']),
		showNormalPlay () {
		  this.setFullScreen(true)
		  this.setMiniPlay(false)
		}
	}

5.Vuex-getters

(1)什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样, 会将数据缓存起来, 只有数据发生变化才会重新计算。
getters是一个属性，是用来监视数据变化的，只要数据变化就会被执行，调用它返回的是一个数据。
(2)使用步骤
①　引入vuex

	<script src="js/vue.js"></script>
	<!--注意点: 在导入Vuex之前必须先导入Vue-->
	<script src="js/vuex.js"></script>

②　创建Vuex对象

	const store = new Vuex.Store({
		// state: 用于保存共享数据
		state: {
			msg: "知播渔"
		},
		// mutations: 用于保存修改共享数据的方法
		mutations: {},
		getters: {  
			formart(state){
				console.log("getters方法被执行了");
				return state.msg + "www.it666.com"
			}
		}
	});

③　使用getters

	<template id="father">
		<div>
			{{this.$store.getters.formart}}
			{{this.$store.getters.formart}}
			{{this.$store.getters.formart}}
		</div>
	</template>

(3)mapGetters
getter.js文件：

	export default {
	  isfullScreen (state) {
	    return state.isfullScreen
	  }
	}

使用时：

	import { mapGetters } from 'vuex'
	computed: {
	  ...mapGetters([
	    'isfullScreen'
	  ])
	}
	
	<div class="normalplay" v-show="isfullScreen">
	</div>