Vuex传值运用

Vue几个主键之间的比较

1. vue中各个组件之间传值
   1.父子组件
   父组件–>子组件，通过子组件的自定义属性：props
   子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…);

   2.非父子组件或父子组件
   通过数据总数Bus，this.$root.$emit(‘事件名’,参数1,参数2,…)

   3.非父子组件或父子组件
   更好的方式是在vue中使用vuex

   方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
   方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

Vuex是什么

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作

vuex是一种专为 Vue.js 设计 的状态管理模式

集中式存储和管理应用程序中所有组件的状态

Vuex 也集成到 Vue 的官方调试工具

一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

Vuex使用：

首先 我们要在项目的命令提示符 安装

 npm install vuex -S

接下来我们在HBuilder 创建store模块，分别维护state/actions/mutations/getters

   store
	index.js
    state.js
    actions.js
    mutations.js
    getters.js

如图：


在index.js文件中新建，注入各大模块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
/* ./代表的是同级 */
/* 在vue里面使用vueX */
/* export default{} 外部的都可以使用默认是本文件名 */
Vue.use(Vuex)

const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

在mian.js中需要引入 store

/* 引入store */
import store from './store'
	

new Vue({
	el: '#app',
	router,
	store, //在main.js中导入store实例
	components: {		
		App
	},
	template: '<App/>',
})

Vuex的组成和应用

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
store
共同维护的一个状态，state里面可以是很多个全局状态
state(保存数据的容器)

export default {
	/* 定义一个变量 */
	/* 不同模块book:{} */
	resturantName: '飞歌餐馆'
}

获取数据并渲染
getters

export default {
	getResturantName: (state) => {
		return state.resturantName;
	}
}

处理数据的唯一途径，state的改变或赋值只能在这里
mutations

export default {
	setResturantName: (state, payload) => {
		state.resturantName = payload.resturantName;
	}
}

数据的异步操作
actions

export default {
	/* 不仅是指向state  而是指向整个Vuex */
	setResturantNameAsync: (context, payload) => {
		console.log('xxx');
		setTimeout(() => {
			console.log('yyy');
			console.log(payload);
			context.commit('setResturantName', payload); //Action提交的是mutation
		}, 3000);
		console.log('zzz');
	},
	doAjax: (context, payload) => {
		//vuex里面不能使用vue实列
		let _this=payload._this;
		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;

		// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
		console.log(url)
		_this.axios.get(url, {
			params: {}
		}).then((response) => {
			console.log('doAjax...................');
			console.log(response);
		}).catch((response) => {
			console.log(response);
		});

	}
}

VuexPage1.vue

<template>
	<div>
		<h3 style="margin: 60px;">第一个Vuex页面{{title}}</h3>
		<button @click="changeTitle">餐馆易主</button>
		<button @click="setResturantNameAsync">三个月后餐馆易主</button>
		<button @click="doAjax">测试Vuex中使用ajax</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			changeTitle() {
				/* mutatons里面的方法名 type*/
				this.$store.commit('setResturantName', {
					/* 载荷的值 payload.resturantName json对象的值*/
					resturantName: '护花使者'
				});
			},
			setResturantNameAsync() {
				/* mutatons里面的方法名 type*/
				this.$store.dispatch('setResturantNameAsync', {
					/* 载荷的值 payload.resturantName json对象的值*/
					resturantName: '护香使者'
				});
			},
			doAjax() {
				/* mutatons里面的方法名 type*/
				this.$store.dispatch('doAjax', {
					/* 载荷的值 payload.resturantName json对象的值*/
					_this: this
				});
			}

		},
		/* 计算属性 看成v-model的变量*/
		/* 监听属性 只能监听 title里面的东西 还需要手动改变里面的值*/
		computed: {
			title() {
				/* return this.$store.state.resturantName; */
				return this.$store.getters.getResturantName;
			}
		}
	}
</script>

<style>

</style>

VuexPage2.vue

<template>
	<div>
		<h3 style="margin: 60px;">第二个Vuex页面{{title}}</h3>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title:''
			};
		},
		created() {
			this.title=this.$store.state.resturantName;
		}
	}
</script>

<style>

</style>

vuex里面不能使用vue实列该如何解决

<button @click="doAjax">测试Vuex中使用ajax</button>
doAjax() {
	/* mutatons里面的方法名 type*/
	this.$store.dispatch('doAjax', {
	/* 载荷的值 payload.resturantName json对象的值*/
	_this: this
		});
}

	doAjax: (context, payload) => {
		//vuex里面不能使用vue实列
		let _this=payload._this;
		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;

		// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
		console.log(url)
		_this.axios.get(url, {
			params: {}
		}).then((response) => {
			console.log('doAjax...................');
			console.log(response);
		}).catch((response) => {
			console.log(response);
		});

	}

页面展示