为什么需要状态管理？

如果一个Vue 应用的很多组件要享用同一份数据，一个数据改变，其他页面的数据也改变，且响应式的变化，那么我们就需要通过一个状态管理工具实现。

简单的父子组件数据共享，用父子组件传值即可

单一组件，数据管理

定义数据state，在组件中使用 components=》组件中通过行为改变数据 action

多个组件，共享数据

后端接口
vuex
组件
devtools

State单一状态树

只能有一个store，获取共享数据通过$store.state统一获取。
例如，我们现实中的信息保存其实是比较低效的，比如我们入职，需要提供社保，公积金，学历，居住证信息等，这些信息分存在不同的系统中，我们获取信息需要去每个系统找。而我们的Vuex参考这个背景，通过单一状态树，来解决多个模块数据问题。

Getters

类似于Vue 计算属性，如果获取state的值需要进一步操作的话，就用到它
例如我们要获取Counter的平方，就用到getters

场景有三种：

只使用state值
使用getters值
需要页面传参数

只用state demo

demo2: 获取成年人名字

state中定义状态

getters中定义计算属性adultSdudents，值为students中计算年龄大于18

页面展示：

一个计算属性依赖其他计算属性，用getters demo

计算属性需要页面传参数 demo

过滤大于指定age的人

页面：

store：返回一个函数，函数中接受参数

mutation 状态更新

vuex 中改变状态的唯一方式：提交mutation

mutation主要包含两个部分：

字符串的事件类型（type）
一个回调函数（handler），该函数的第一个参数就是state

定义方式：

new Vuex.Store({
    mutations: {
        increment (state) {
            state.counter++
        }
    }
})

通过提交mutation更新:

$store.commit('increment') // 传入事件类型

关于mutation的参数

页面上调用：

store中定义：

commit提交区别：

页面上调用：

store中定义：

数据的响应式原理&mutation响应规则

我们的属性会被添加到响应式系统中，当数据发生变化，会通知依赖该数据的视图，让其进行刷新.在vuex中所有数据属性需要在state中提前定义好，才能被响应式系统检测到，挂载之后在新增属性就不再响应式系统中.
在vuex中，state中需要提前定义好所有的属性，新增的响应不生效。除非使用Vue.set(obj, key, newValue)/Vue.set(arr, index, newItem)

Mutation类型用常量

创建类型

使用常量定义Mutation名字

提交修改Commit

actions

我们要求mutation中的操作是同步的，因为devtools需要捕获mutation快照，查看共享的数据被谁改了，怎么改的？

看下mutation中的代码用异步写，会发生什么？

结果：页面变了，但是devtools数据还是修改之前的info。

如果真要异步修改数据怎么办？ =》actions

异步操作在action做，
action可以返回个promise
页面可以dispatch action后通过.then回调

认识Module

出现原因：
单一状态树要求Vuex管理着所有的store状态，但是对着状态越来越多，store会非常臃肿，为了解决这个问题，Vuex允许我们将store分割成多个模块（Module），每个模块有自己的state mutations actions getters

const moduleA = {
    state: {},

    mutations: {},

    actions: {},

    getters: {}
}

const store = new Vuex.Store({
    state: {},

    mutations: {},

    actions: {},

    getters: {},
    modules: {
        a: moduleA
    }
})

modules中的getter,可以用自己模块的state，getters以及根state
页面用模块中的state，通过$store.state.a.name 访问
页面用模块中的getters，通过$store.getters.fullName3访问，与根getters访问一样
页面中调用模块中的mutations，通过$store.commit(type, payload)，与根mutaions一样
模块中的dispatch调用actions,参数contenx不一样，模块会有根信息相关属性

总结：

vuex用于多组件数据状态管理。
通过Vuex.Store实例化，包含五大核心.
state中定义数据
mutations中同步修改数据，mutations中的函数，接受两个参数，一个是state,一个是payload。调用可以在页面中this.$store.commit(type, payload)也可以在异步actions中this.$store.commit(type, payload)
actions中定义异步事件，里头可以拿到返回结果，通过this.$store.commit(type, payload)修改state。调用异步事件通过this.$store.dispatch(type, payload)
getters 是计算属性，里边的方法，可以依赖state或者getters,模块中的getters还可以依赖rootState
modules 用于解耦state统一管理的数据，里边有自己的四大核心，除了state的取值需要包裹一层根处对模块引用的变量名，其他的访问一样，另外dispatch的contenx也会多一些rootState,rootGetters的属性