1、为什么要用vuex？

组件通信的类型：

父子通信、跨级通信、兄弟通信、路由视图级别通信

2、通信解决方案

- props/$emit（父子通信）

- $refs/ref（父子通信）

- $children/$parent（父子通信）

- $attrs/$listeners（父子通信、跨级通信）

- provide/inject（父子通信、跨级通信）

- eventBus（父子通信、跨级通信、兄弟通信）

- vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）

- localStorage/sessionStorage等基于浏览器客户端的存储（父子通信、跨级通信、兄弟通信、路由视图级别通信）

3、vuex是什么？

vuex是一个专为vue.js应用程序开发的状态管理模式，类似redux

4、vuex的工作流

State : 存储应用状态数据（React 中的 State）

Vue Component : 显示 State

Actions : 提交修改 State 的动作（包括异步行为）（React 中的 action）

Mutations : 唯一更改 State 的位置（React 中的 Reducer）

5、安装vuex

npm i vuex

yarn add vuex

6、从Store开始

store就是仓库，我们起那么提到的state就存储在store中，同时提交动作、修改状态的方法也都由store提供和管理

必须在Vue.use（Vuex）之后创建store

7、核心概念

state

getters

mutations

actions

7-1 state

7-1-1 state的创建

存储应用状态数据的对象，state 的值可以是一个对象，也可以是一个返回对象的函数，类似 vue 中组件的 data ，使用函数的方式返回对象可以避免对象引用导致的副作用问题

通过store.state访问状态数据

state数据与组件data一样是被追踪的

7-1-2在组件中使用 store

出现问题：

state的更新并不会更新视图

解决方法：

使用computed

8、getters

有时候我们需要从store中派生出一些状态，类似组件的data与computed，store也提供了一个getters对象来处理派生数据

8-1 getters函数

与组件属性一样，我们是通过定义一个函数的形式来返回派生数据的，getters函数接受两个参数

第一个参数：state对象

第二个参数：getters对象

8-2通过属性访问

同样的，与组件计算属性一样，默认是通过属性的方式去访问，getters中的数据的，这种方式与组件的计算属性一样，也是会有缓存结果的

8-3 通过方法访问

我们还可以通过闭包函数的形式返回一个函数，来实现给getters函数传参，需要注意的是这种方式不支持结果缓存

8-4 使用辅助函数 mapGetters

与mapState函数类似，通常映射到组件的computed上

9、mutations

更改Vuex的store中的状态的唯一方法是提交mutation（类似 redux 中的 action + reducer），Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）

9-1、提交

type

要提交的mutation回调函数名称，type为固定的key

payload

载荷：提交的额外数据，任意格式

9-2 mutation函数

mutation中的函数被commit执行的时候，接收两个参数

第一个参数：state对象

第二个参数：commit提交的payload

在mutation函数中，我们就可以通过state对象进行状态数据的修改

9-3 使用辅助函数mapMutations

mapMutations函数的使用与mapState和mapGetters类似，但是其一般是把组件的methods映射为store的mutations的commit调用

9-4 mutation函数必须是同步的

commit方法没有返回值

 10、actions

action中的函数与mutation中的函数类似，但是他主要用来进行异步任务的处理，然后通过提交mutation来修改state

注意：action中的函数不要直接修改state

10-1 提交

action任务需要通过dispatch方法来提交，与commit类似

dispatch方法有返回值，且一定返回一个promise对象

10-2 action函数

第一个参数：store对象

第二个参数：dispatch提交的payload

10-3 使用辅助函数 mapActions

与mapMutations函数类似，把组件的nethods映射为store的actions的dispatch调用

Module

这个更多的是基于一种代码组织结构上的辅助