Vuex的介绍

Vuex是什么：vuex是一个vue的状态管理工具，状态就是数据（一个可以帮助管理vue通用的数据（多组件共享的数据）的插件）

Vuex的使用场景：① 每个状态在很多个组件来使用（个人信息）② 多个组件共同维护一份数据（购物车）

Vuex的优势：① 共同维护一份数据，数据集中化管理 ② 响应式变化 ③ 操作简洁（vuex提供了一些辅助函数）

1 核心概念-State状态

1.提供数据：State提供唯一的公共数据源，所有共享的数据都要统一放到store中的State中存储。

在State对象中可以添加我们要共享的数据

// 创建仓库
const store = new Vuex.Store({
	// state 状态，即数据，类似于vue组件中的data
	// 区别：data是组件自己的数据，state是所有组件共享的数据
	state:{
		count:100
	}
})

2.使用数据

① 通过 store 直接访问

获取 store
(1) this.$store 
(2) import 导入 store

模版中：{{$store.state.xxx}}
组件逻辑中：this.$store.state.xxx
JS模块中：store.state.xxx

② 通过辅助函数

mapState是辅助函数，帮助我们把store中的数据 自动 映射到组件的计算属性中

import {mapState} from 'vuex'
computed:{
	...mapState(['count'])
}

2 核心概念-mutations

vuex 同样遵循单项数据流，组件内不能直接修改仓库的数据。

state数据的修改只能通过mutations

更改 Vuex 的store中的状态的唯一方法是提交mutations。Vuex中的，mutations非常类似于事件：每个mutations都有一个字符串的事件类型和一个回调函数。这个回调函数就是实际进行状态更新的地方，并且会接受state作为他的第一个参数。

1.定义 mutations 对象，对象中存放 state 方法

const store = new Vue.Store({
	state:{
		count:100
	},
	mutations:{
		// 第一个参数是当前store的state属性
		addCount(state,参数){
			state.count += 参数
		}
	}
})

2.组件中提交调用 mutations

this.$store.commit('addCount',n)

向store.commit传入的额外参数称为mutations的载荷（payload）

注意点：mutations参数有且只能有一个，如果需要多个参数，可以包装成一个对象

3.通过 strict：true 可以开启严格模式

辅助函数：mapMutations

mapMutations 和 mapState 很想像，他是把位于mutations中的方法提取出来，映射到组件methods中

3 核心概念-actions

mutations 必须是同步的（便于监测数据变化，记录调试）

actions 处理异步操作

Actions类似于mutation，不同在于 ：① Action 提交的是 mutation，而不是直接变更状态。② Action 可以包含任意异步操作

1.提供 actions 方法

action函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用 context.commit 提交一个 mutation

actions:{
	setAsyncCount(context,num){
		setTimeout(()=>{
			context.commit('changeCount',num)
		},1000)
	}
}

2.页面中 dispatch 调用

this.$store.dispatch('changeCount',200)

辅助函数：mapActions

mapActions 是把位于 actions 中的方法提取出来，映射到组件methods中