核心概念
Store 有五个核心的概念,State、Getters、Mutations、Actions、Modules。你都必须要知道它们的作用是什么
State 状态
我们每一个项目,基本上都是使用同一个 store 实例,所以 State 也是共用一个,State 是一个对象,也是唯一一个数据源,整个 Store 中的数据都从 State 中进行管理存储。State 其实就像是 Vue 实例中的选项 data。
Getters 计算属性
有时候我们需要从 store 中的 state 中派生出一些状态,这种情况就需要用到 getters。其实 getters 就是和计算属性 computed 一样的。因为有些情况你觉得 state 的数据不是你想要的格式,你想在其基础上加工进行处理,然后在进行使用,当然也不会影响原始 state 的值。
Mutations 同步修改 State
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。mutations 非常类似 Vue 在调用子组件时,给子组件传递了数据,子组件通过 $emit 通知父组件修改数据。都采用单向数据流的方式。
Actions 异步提交 Mutations
在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务,都必须是即刻修改当前状态。
Actions 类似于 mutation,它们之间不同的地方是,Actions 提交的是 mutation,而不是直接变更状态 state。Actions 是异步的,函数内可以包含任意异步操作。
Module 模块
由于使用相同的一个状态 State,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、getters、mutations、actions、module。