Vue Vuex共享数据案例

1、概念

  专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。

1.1、Vuex工作原理

• Actions
  值为一个对象，包含多个响应用户动作的回调函数。通过使用commit()用来触发Mutations中的函数调用，进而间接的修改state中的数据。使用==$store.dispatch(‘参数1’,‘参数2’)，参数1为action回调明，参数2用于传递值。 ==
• Mutations
  值为一个对象，包含多个直接更新state的方法。调用方法：在action中使用commit(‘Mutation中的方法名’)触发
• State
  Vuex管理的状态对象，它应该是唯一的。用于存储共享数据

1.2、Actions、Mutations、State示例

Actions

const actions = {
	add(context, value) {
		// context是上下文对象，value是所传数据（可选，也可以不传）
		console.log(context + value);
		// 触发Mutations中的ADD方法
		context.commit("ADD", value)
	}
}

Mutations

const mutations = {
	ADD(state, value) {
		// state中存储这共享数据，value是传过来的数据
		console.log(state, value);
		// 修改state中的数据
		state.salesTicket += value
	}
}

State

const state = {
	sumTicket: 100,
	salesTicket: 0
}

2、不同窗口卖票，共享总票数

2.1、效果

不同的窗口组件都可以使用总票数数据。

2.2、后台组件BackStage

<template>
	<div>
		<h2>后台数据</h2>
		<h3>总票数:{{sumTicket}}</h3>
		<h3>剩余票数:{{sumTicket-salesTicket}}</h3>
	</div>
</template>

<script>
	export default {
		name: 'BackStage',
		computed: {
			salesTicket() {
				return this.$store.state.salesTicket
			},
			sumTicket(){
				return this.$store.state.sumTicket
			}
		}
	}
</script>

<style>
</style>

2.3、窗口组件Window

<template>
	<div class="cen">
		<h2>窗口{{num}}</h2>
		<h3>卖出总票数：{{winTicket}}</h3>
		<button @click="clickAdd">卖票{{num}}张</button>
	</div>
</template>

<script>
	export default {
		name: 'Window',
		props: ['num'],
		data() {
			return {
				winTicket: 0
			}
		},
		methods: {
			clickAdd() {
				// 点击事件触发后，将触发actions中add
				// 并将卖了几张票作为参数传入，
				// 如果actions中不做复杂逻辑处理，
				// 也可直接调用Mutations中的ADD
				// 例:this.$store.commit("ADD",this.num)
				this.$store.dispatch("add", this.num)
				this.winTicket += this.num
			}
		},
	}
</script>

<style scoped>
	.cen{
		text-align: center;
	}
</style>

2.4、Vuex的使用

在components同级目录中创建store/index.js文件

import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

// 在各个组件中使用$store.dispatch('add',value)触发action中的函数
// 主要用于业务逻辑处理，与服务器通信或者获取数据验证等
const actions = {
	add(context, value) {
		console.log(context + value);
		context.commit("ADD", value)
	}
}

// Actions中触发此中函数，用于修改共享数据state，主要用于数据修改。
const mutations = {
	ADD(state, value) {
		console.log(state, value);
		state.salesTicket += value
	}
}

const state = {
	sumTicket: 100,
	salesTicket: 0
}
export default new Vuex.Store({
	actions,
	mutations,
	state
})

3、mapState、mapGetters、mapActions、mapMutations的使用

3.1、mapState使用

使用mapState等可以让我们快速的生成计算属性,使用前需要在前引用
import {mapState} from 'vuex'
例：上面案例BackStage

// 原本写法
computed: {
	salesTicket() {
		return this.$store.state.salesTicket
	},
	sumTicket(){
		return this.$store.state.sumTicket
	}
}
// 简写方法
computed: {
	// 数组写法
	...mapState(['salesTicket','sumTicket'])
	// 对象写法
	...mapState({salesTicket:'salesTicket',sumTicket:'sumTicket'})
}

3.2、mapGetters使用

import {mapGetters} from 'vuex'
例：

// 原本写法
computed: {
	variable1() {
		return this.$store.getters.variable1
	},
	variable2(){
		return this.$store.getters.variable2
	}
}
// 简写方法
// 数组写法
...mapGetters(['variable1','variable2'])
// 对象写法同上

3.3、mapActions使用

例：

// 原本写法
<button @click="clickEvent">点击</button>
methods:{
	clickEvent(){
		this.$store.dispatch('action-name',参数)
	}
}

// 简写方法，简写方法需要在调用时传入参数
<button @click="clickEvent(参数)">点击</button>
methods:{
	// 对象写法
	...mapAction({clickEvent:'action-name'})
	// 数组写法,这种写法函数名也是action-name
	// 调用时需和action-name保持一致
	...mapAction(['action-name'])
}

3.4、mapMutations使用

例：

// 原本写法
<button @click="clickEvent">点击</button>
methods:{
	clickEvent(){
		this.$store.commit('Mutation-name',参数)
	}
}

// 简写方法
<button @click="clickEvent(参数)">点击</button>
methods:{
	// 对象写法
	...mapAction({clickEvent:'Mutations-name'})
	// 数组写法,这种写法函数名也是Mutations-name，
	// 调用时需和Mutations-name保持一致
	...mapAction(['Mutations-name'])
}