vuex实践之路——笔记本应用(二)
2024-09-17 21:25:13
上一篇我们简单介绍了vuex在此项目中的作用。
这次来理一下项目的整体思路。
main.js上次看过了,首先看App.vue文件
我们引入了Toolbar.vue,NodeList.vue,Editor.vue并渲染到页面中。
Toolbar.vue的代码在上篇文章中也存在,来看下NodeList.vue。
这里就体现了多个组件共享状态了,如果我们点击添加按钮,列表中会立即添加一个笔记,编辑框中也会显示出新的笔记供编辑。
我们再来体会一下Vue文档中的这段话:
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 1.多个视图依赖于同一状态。
2.来自不同视图的行为需要变更同一状态。
对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。 因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为! 另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。
我们的三个兄弟组件,无需通过繁琐的父子组件传递参数等功能来实现共享状态,共享store.js中的notes。
是不是感觉到了vuex的强大之处?
Editor.vue没什么说的,编辑功能并更新到notes中。
至此我们已经完成了基本的项目,下篇我们来学习一下高级功能。
最新文章
- INITIAL参数设置导致TRUNCATE TABLE不能降低高水位线案例
- ThinkPHP 3.2.3(一)基础
- 利用Spring MVC搭建REST Service
- xth的旅行(codevs 1450)
- 关于缓存中Cookie,Session,Cache的使用
- oracle pl sql 解锁表
- python 关键字参数
- Python(2.7.6) 函数对象与闭包
- 刷漆(Codechef October Challenge 2014:Remy paints the fence)
- 修改EF的默认约定模型的方式
- MSSQL查询数据分页
- 洛谷 P1045 &; [NOIP2003普及组] 麦森数
- 看看.NET Core几个Options的简单使用
- mysql 远程连接 10038
- 委托(作用:解耦),lambda的演化
- HTML(二)
- Objective-C Collection was mutated while being enumerated crash
- Aria2 使用手札(简易部署 + 快速进阶)
- Python中subprocess 模块 创建并运行一个进程
- Python Matplotlib绘图库 安装