Vuex核心概念（课堂笔记）

目录

• state
• mutation
• Action
• Getter

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对组件中私有数据，依旧存储在自身的data中即可。
父向子：v-bind
子向父：v-on

state

提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储

const store = new Vuex.Store({
	state: { count: 0 }
})

组件访问state中数据的方式

（一）this.$store.state.全局数据名称
（二）
//1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'
//2.通过刚导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的 computed计算属性
computed: {
	...mapState(['count'])
}

mutation

用于更新store中的数据

1. 只能通过mutation变更store数据，不可以直接操作store中的数据
2. 通过这种方式虽然操作起来较繁琐，但可以集中监控所有数据的变化

//定义mutation
const store = new Vuex.Store({
	state: {
	count: 0
	},
	mutations: {
		add(state) {
			//变更状态
			state.count++
		}
	}
})
//触发mutation
methods: {
	handle() {
		this.$store.commit('add')
	}
}
//传递参数
mutations: {
	addN(state, step) {
		state.count += step
	}
}
//触发
methods: {
	handle2() {
		this.$store.commit('addN', 3)
	}
}

触发mutation的方法二：

//1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
//2.将指定的mutations函数映射为当前组件的methods函数
methods: {
	...mapMutations(['add', 'addN'])
}

mutation中不能写异步的代码，用action中处理异步操作

Action

用于处理异步操作。
如果通过异步操作变更数据，必须通过Action，不能用Mutation，但是在Action中还是要通过触发mutation的方式间接改变数据。action中不能直接修改state中的数据

//定义Action
const store = new Vuex.Store({
	//...
	mutations: {
		add(state) {
			state.count ++
		}
	},
	actions: {
		addAsync(context) {
			setTimeout(() => {
				context.commit('add')
			}, 1000)
		}
	}
})
//触发(一)
methods: {
	handle() {
		this.$store.dispath('addAsync')
	}
}
//传参形式与mutation相同

//触发（二）
//1.从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
//2.将指定的action函数映射为当前组件的methods函数
methods: {
	...mapActions(['addAsync'])
}

Getter

用于对store中的数据进行加工处理形成新的数据
1.getter可对store中已有的数据加工处理后形成新的数据，类似vue的计算属性
2.store中数据发生变化，getter的数据也会发生相应的变化
不会修改state中的数据

getters: {
	showNum: state => {
		return '当前最新的数据量是【'+ state.count +'】'
	}
}
//调用
this.$store.getters.名称

import { mapGetters } from 'vuex'

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