持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
自学前端
-
前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vuex相关知识
- 这是基于我学习的笔记而来的文章
- backend: 后端 frontend: 前端
- Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex核心概念
-
Vuex有几个比较核心的概念
- state: 状态
- Getters: “getter”（可以认为是 store 的计算属性）
- Mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
- Action: Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
- Module: 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块
State单一状态树
-
Vuex提出使用单一状态树, 什么是单一状态树呢?
- 英文名称是Single Source of Truth, 也可以翻译成单一数据源
-
但是, 它是什么呢? 我们来看生活中的例子
-
OK, 我们用一个生活中的例子做一个简单的类比
-
我们知道, 在国内我们有很多的信息需要被记录, 比如上学时的个人档案, 工作后的社保记录, 公积金记录, 结婚后的婚姻信息, 以及相关的户口, 医疗, 文凭, 房产记录等等(还有很多信息)
-
这些信息被分散在很多地方进行管理, 有一天你需要办某个业务时(比如入户某个
城市, 你会发现需要到各个对应的工作地点去打印, 盖章各种资料信息, 最后到一个地方提交证明你的信息无误
-
这种保存信息的方案, 不仅仅低效, 而且不方便管理, 以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)
-
-
这个和我们在应用开发中比较类似:
- 如果你的状态信息是保存到多个Store对象中的, 那么之后的管理和维护等等都会变得困难
- 所以Vuex也使用了单一状态树来管理应用层级的全部状态
- 单一状态树能够让我们最直接的方式找到某个状态的片段, 而且在之后的维护和调试过程中, 也可以非常方便的管理和维护
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于vuex的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
