个人整理的demo , 欢迎stat 打开链接
Vuex核心概念整理
1、安装和使用
npm安装:
1 | npm install vuex --save |
使用:
1 | // main.js |
1、State 使用
Vuex
使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store
实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
1 | // Childer.vue |
2、Getter 使用
有时候我们需要从 store
中的 state
中派生出一些状态,例如对列表进行过滤并计数:
1 | // main.js |
3、Mutation 使用
更改 Vuex
的 store
中的状态的唯一方法是提交 mutation
。Vuex
中的 mutation
非常类似于事件:每个 mutation
都有一个字符串的 事件类型 (type)
和 一个 回调函数 (handler)
。
这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state
作为第一个参数:
1 | // main.js |
不可直接调用一个 mutation handler
。这个选项更像是事件注册:“当触发一个类型为 increment
的 mutation
时,调用此函数。”要唤醒一个 mutation handler
,你需要以相应的 type
调用 store.commit
方法:
1 | // main.js |
需要向 store.commit
传入额外的参数,即 mutation
的 载荷(payload):
1 | // main.js |
一条重要的原则就是要记住 mutation 必须是同步函数。
4、Action 使用
Action
类似于 mutation
,不同在于:
Action
提交的是mutation
,而不是直接变更状态。Action
可以包含任意异步操作。
注册一个简单的action
:
1 | // main.js |
通过 store.dispatch
方法来触发 action
来提交修改:
1 | // Childer.vue |
组合 Action
,可以使用 new Promise
实现同步:
具体查看 点击查看
5、Module
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store
对象就有可能变得相当臃肿。
为了解决以上问题,Vuex
允许我们将 store
分割成模块(module)。每个模块拥有自己的 state
、mutation
、action
、getter
、甚至是嵌套子模块——从上至下进行同样方式的分割:
1 | // main.js |
模块的局部状态
对于模块内部的 mutation
和 getter
,接收的第一个参数是模块的 局部状态对象
。
1 | // main.js |
同样,对于模块内部的 action
,局部状态通过 context.state
暴露出来,根节点状态则为 context.rootState
:
1 | const moduleA = { |
对于模块内部的 getter
,根节点状态会作为第三个参数暴露出来:
1 | const moduleA = { |
6、项目结构
Vuex
并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
- 应用层级的状态应该集中到单个
store
对象中。 - 提交
mutation
是更改状态的唯一方法,并且这个过程是同步的。 - 异步逻辑都应该封装到
action
里面。
只要你遵守以上规则,如何组织代码随你便。如果你的 store
文件太大,只需将 action
、mutation
和 getter
分割到单独的文件。
对于大型应用,我们会希望把 Vuex
相关代码分割到模块中。下面是项目结构示例:
1 | ├── index.html |
参考购物车示例。