vue笔记——vuex

什么是Vuex

Vuex是一个专门为vue.js应用程序开的状态管理模式
它采用集中式存储管理应用的所有组件的状态
并以相应的规则保证以一种可预测的方式发生变化

应用场景

1.多个视图依赖于同一状态

2.来自不同视图的行为需要改变同一状态

Vuex组成

State —— 数据仓库
Getter —— 用来包装数据（不修改原值）
Mutation —— 用来修改数据
只能通过mutation变更store数据，不可以直接操作store中的数据
通过这种方式虽然看起来稍微繁琐一些，但是可以集中监控所有数据的变化；不能在mutation函数中执行异步操作
Action —— 用来处理异步操作
因为mutation不能执行异步操作，所以异步操作函数统一放到action中，但是action提交的是mutation，不能直接改变state，所以要想处理state还需要通过context.commit()执行mutation里的方法(context相当于new的Store实例)

在vue组件中获取state数据

获取单个值

this.$store.state.value

获取多个值

//从vuex中导入mapState函数
import { mapState } from ‘vuex’
//通过导入的mapState函数，将当前组件需要的全局数据映射为当前组件的computed计算属性：
computed: {
	...mapState(['value1', 'value2'...])
}

定义一个getter

const store = new Vuex.Store({
	state:{ count : 0 },
	getters: {
		showNum(state) {
			return '当前的值是'+ state.count
		}
	}
})

使用getters

第一种方法

this.$store.getters.名称

第二种方法

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

修改state数据（调用mutations中的函数）

第一种方法

this.$store.commit("mutations函数名称"，自定义实参)

第二种方法

//从vux中导入mapMutations 函数
import { mapMutations } from 'vuex'
//通过刚才导入的mapMutations 函数，映射为当前组件的methods函数
methods: {
	...mapMutations(['add', 'add2'])
}
//可以在组件中直接调用mutation传入的方法

//vuex中mutation函数定义时第一个参数是state(状态树)

触发Action函数

触发actions的第一种方式

methods: {
	handle(){
   		this.$store.dispatch('addAsync', 自定义实参)
   }
}

//vuex中action函数定义时第一个参数是context（当前实例的store对象）

触发actions的第二种方式

//从vux中导入mapActions 函数
import { mapActions } from 'vuex'
//通过刚才导入的mapMutations 函数，映射为当前组件的methods函数
methods: {
	//映射到方法中
	...mapActions(['addAsync', 'addAsync2']),
}