持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
自学前端
- 前文
- 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
- 介绍本次学习的是vuex相关知识
- 这是基于我学习的笔记而来的文章
单界面的状态管理
- 我们知道, 要在单个组件中进行状态馆里是一件非常建单的事情
- 什么意思呢? 我们来看下面的图片
- 这图片中的三种东西, 怎么理解呢?
- State: 不用多说就是我们的状态.(你姑且可以当做就是data中的属性)
- View: 视图层, 可以针对State的变化, 显示不同的信息.(这个号理解吧?)
- Action: 这里的Actions主要是用户的各种操作: 点击, 输入等等, 会导致状态的改变
- 写点代码, 加深理解:
- 看下边的代码效果, 肯定会实现吧?
界面状态管理的实现
- 在这个案例中，我们有木有状态需要管理呢？没 错，就是个数counter。
- counter需要某种方式被记录下来，也就是我们 的State。
- counter目前的值需要被显示在界面中，也就是 我们的View部分。
- 界面发生某些操作时（我们这里是用户的点击 也可以是用户的input),需要去更新状态，也就 是我们的Actions
- 这不就是上面的流程图了吗？
多界面状态管理
- Vue已经帮我们做好了单个界面的状态管理, 但是如果是多个界面呢?
- 多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
- 不同界面的Actions都想修改同一个状态(Home.vue需要修改，Profile.vue也需要修改这个状态)
- 也就是说对于某些状态（状态1/状态2/状态3）来说只属于我们某一个试图，但是也有一些状态（状态/状态b/状态c)
属于多个试图共同想要维护的
- 状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。
- 但是状态/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！
- 没错，Vuex就是为我们提供这个大管家的工具。
- 全局单例模式（大管家）
- 我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
- 之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。
- 这就是Vuex背后的基本思想。
Vuex状态管理图例
- 一起来看一副官方给出的图片
后记
- 希望对对前端有兴趣的朋友们有帮助
- 这篇文章主要是关于vuex的, 希望大家喜欢
- vue的作者是中国人尤雨溪, 非常厉害的人
