Vuex

1. Vuex介绍]

1.1 传统组件之间数据共享

• 父向子传值: V-bind 属性绑定
• 子向父传值: v-on 事件绑定
• 兄弟组件之间共享数据: EventBus
  • $on 接收数据的那个组件
  • $emit 发送数据的那个组件

上面的三种方式是小范围的数据共享,但是大范围数据共享就很繁琐

1.2 Vuex共享数据

Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据共享

使用Vuex统一管理状态好处

• 能够在vuex中集中管理共享的数据,易于开发和后期维护
• 能够高效地实现组件之间的数据共享,提高开发效率
• 存储在vuex中的数据都是响应式的,能够实时保持数据与页面同步

1.3 Vuex数据存储

• 组件之间共享的数据,存储在vuex中
• 组件中的私有数据,依旧存储在组件自身的data中

2. 使用Vuex

• 安装Vuex依赖包: npm install vuex --save
• 导入vuex包:
  • import Vuex from ‘vuex’
  • Vue.use(Vuex)
• 创建store对象

const store = new Vuex.Store({
	// state中存放的就是全局共享数据
	state: { count: 0 }
})

3. 核心概念

Vuex中的主要核心概念如下

• State
• Mutation
• Action
• Getter

3.1 State

State提供唯一的公共数据源，所有共享的数据都要同意放到Store的State中进行存储

// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
	// count: 就是需要共享的数据
	state: { count : 0}
})

组件访问State中数据的第一种方式

• this.$store.state.全局数据名称

组件访问State中数据的第二种方式

// 1. 从vuex中按需导入mapState函数
impore { mapState } from 'vuex'

// 通过上面导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
// 2. 将全局数据,映射为当前组件的计算属性
computed: {
	...mapState(['count'])
}

3.2 Mutation

Mutation用于变更Store中的数据

• 只能通过mutation变更Store数据,不可以直接操作Store中的数据
• 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化
• 不要在这里面执行异步操作, 要想使用异步就用Action
• 只有Mutation才能改变state中的数据, Action都是间接改变数据,中间是(Mutation)

---

• 处理第一种方式

// 定义 Mutaion , 无参
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		add(state) {
			// 变更状态
			state.count++
		}
	}
})
// =========================== 带参
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		add(state,step) {
			// 变更状态
			state.count += step
		}
	}
})

// *.vue文件访问
methods: {
	handles() {
		// 触发mutations的第一种方式
		this.$store.commit('add')
		// 带参
		// this.$store.commit('add', 3)
	}
}

---

• 处理第二种方式

// 1. 从vuex中按需导入mapMutations函数到*.vue文件的script标签中
import { mapMutations } from 'vuex' // 第一行导入
// 导入完成mapMutations函数,将需要的mutations函数,映射为当前组件的methods方法

// 2. 将指定的mutaions函数,映射为当前组建的methods函数
methods: ({
	...mapMutations(['add', 'add1'])
})
 

3.3 Action

Action用于处理异步任务

• 如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据

---

• 触发Action第一种方式

// 定义Action: 使add函数延时1秒触发
const store = new Vuex.Store({
	// ... 省略其他代码
	mutations: {
		add (state) {
		// 带参: add (state, step)
			state.count++
		}
	},
	actions: {
		// 自定义一个函数
		addAsync (context) {
		// 带参: addAsync (context, step) {
			setTimeout( () => {
			// commit参数只能是mutations里面的函数,然后出发函数
				contnet.commit('add')
			}, 1000)
		}
	}
})

// *.vue文件. 触发Action
methods: {
	handle () {
		// 触发 actions 的第一种方式
		this.$store.dispatch('addAsync')
		// 带参:  this.$store.dispatch('addAsync', 5)
	}
}

---

• 触发actions的第二种方式

// 1. 从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
// 通过上面导入的mapActions函数, 将需要的action函数,映射为当前组件的methods方法

// 2. 将指定的actions函数,映射为当前组件的methods函数
methods: {
	...mapActions(['addAsync', 'addNAsync'])
}

3.4 Getter

Getter用于对Store中的数据进行加工处理形成新的数据

• Getter可以对Store中已有的数据进行加工处理之后形成新的数据,类似Vue的计算属性
• Store中数据发生变化, Getter的数据也会跟着变化

// 定义Getter
const store = new Vuex.Store({
	state; {
		count: 0
	},
	getters: {
		showNum: state => {
			return '当前最新的数量是: ' + state.count
		}
	}
})

// *.vue: 使用getters: 方法一 
this.$store.getters.名称

// *.vue: 使用getters: 方法二
<h3>当前最新的数据是: {{showNum}}</h3>

import { mapGetters } from 'vuex'
computed: {
	...mapGetters(['showNum'])
}