持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vuex相关知识
- 这是基于我学习的笔记而来的文章
- backend: 后端 frontend: 前端
Mutation常量类型-概念
- 我们来考虑下面的问题
- 在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)
- 当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多
- 方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况
Mutation同步函数
- 通常情况下, Vuex要求我们Mutation中的方法必须是同步方法
- 主要原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照
- 但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成
- 比如我们之前的代码, 当执行更新时, devtools中会有如下信息:
- 你会发现state中的info数据一直没有被改变, 因为它无法追踪到
- so, 通常情况下, 不要再mutation中进行异步的操作
Action的基本定义
- 我们强调, 不要在Mutation中进行异步操作,比如网络请求, 必然是异步的, 这个时候怎么处理呢?
- Action类似于Mutation, 但是用来代替Mutation进行异步操作的
认识Module
-
Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
- Vue使用单一状态树, 那么意味着很多状态都会叫给Vuex来管理
- 当应用宾得非常复杂时, store对象就有可能变得相当臃肿
- 为了解决这个问题, Vuex允许我们将store分割成模块(Modele), 而每个模块都拥有自己的state, mutations,action,getters等
-
我们按照什么样的方式来组织模块呢?
- 我们来看下边的代码
Module局部状态
-
上面的代码中, 我们已经有了整体的组织结构, 下面我们来看看具体的局部模块中的代码如何书写
- 我们在moduleA中添加state, mutation, getters
- mutaion和getters接收的第一个参数是局部状态对象
- 注意:
- 虽然, 我们的doubleCount和increment都是定义在对象内部的
- 但是在调用的时候, 依然是通过this.$store来直接调用的
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于vuex的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
