上一篇我们简单介绍了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中。

至此我们已经完成了基本的项目,下篇我们来学习一下高级功能。

vuex实践之路——笔记本应用(二)的更多相关文章

  1. vuex实践之路——笔记本应用(一)

    首先使用vue-cli把环境搭建好. 介绍一下应用的界面. App.vue根组件,就是整个应用的最外层 Toolbar.vue:最左边红色的区域,包括三个按钮,添加.收藏.删除. NoteList.v ...

  2. vuex实践之路——笔记本应用(三)

    Actions Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 act ...

  3. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  4. 《程序设计语言——实践之路(英文第三版)》【PDF】下载

    <程序设计语言--实践之路(英文第三版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382234 内容简介 <程序设计语 ...

  5. 《程序设计语言——实践之路【PDF】下载

    <程序设计语言--实践之路[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 <程序设计语言--实践之路(第3版 ...

  6. WebP 图片实践之路

    我们会从三部分来聊聊webp这个话题. 什么是webp,它有什么用? 使用webp的常规方法以及优劣. 我们是如何用上webp的. PS:如果是对webp有一定了解的朋友,建议直接看第三部分.因为是讲 ...

  7. webp图片实践之路(转载)

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  8. 《C++实践之路.pdf》源码

    > 源码下载方法 < >> 打开微信 >> 扫描下方二维码 >> 关注林哥私房菜 >> 输入对应编号获取百度网盘提取密码 全书源码[已更新完 ...

  9. 知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路

    本文来自知乎官方技术团队的“知乎技术专栏”,感谢原作者陈鹏的无私分享. 1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动 ...

随机推荐

  1. python模拟自动登录网站(urllib2)

    不登录打开网页: import urllib2 request = urllib2.Request('http://www.baidu.com') response = urllib2.urlopen ...

  2. 端口扫描--zmap

    ZMap被设计用来针对整个IPv4地址空间或其中的大部分实施综合扫描的工具.ZMap是研究者手中的利器,但在运行ZMap时,请注意,您很有 可能正在以每秒140万个包的速度扫描整个IPv4地址空间 . ...

  3. idea本地将本地现有的项目和gitlab进行管理并提交到线上

    备注:通过这个操作可以让本地的项目与远程gitlab进行关联,并将本地的代码提交到gitlab上面 1.在idea的菜单项选择 VCS>Import into Version Control&g ...

  4. Vue那些事儿之用visual stuido code编写vue报的错误Elements in iteration expect to have 'v-bind:key' directives.

    当用vsc打开我们的vue代码时,在其他编辑器里面本来没有错误,到这个编辑器里面 v-for就出毛病了.如下图所示, 那是因为我们打开了对vue进行Eslint的检查. 搜索vetur.validat ...

  5. [POI2007]MEG-Megalopolis

    传送门:嘟嘟嘟 第一反应是树链剖分,但是太长懒得写,然后就想出了一个很不错的做法. 想一下,如果我们改一条边,那么影响的只有他的子树,只要先搞一个dfs序,为什么搞出这个呢?因为有一个性质:一个节点的 ...

  6. PHP生成excel表格文件并下载

    本文引自网络,仅供自己学习之用. 利用php导出excel我们大多会直接生成.xls文件,这种方便快捷. function createtable($list,$filename){ header(& ...

  7. [SQL123] Oracle SQL 统计一定时间间隔内的数据

    --Group by State_ts "per X minutes"select to_char(state_ts, 'hh24')||':'||floor(to_char(st ...

  8. vue_resource和axios

    vue_resource和axios 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来 ...

  9. WorldWind源码剖析系列:代理助手类ProxyHelper

    代理助手类ProxyHelper通过平台调用的互操作技术封送了若干Win32结构体和函数.该类类图如下. 提供的主要处理方法基本上都是静态函数,简要描述如下: 内嵌类型WINHTTP_AUTOPROX ...

  10. OpenCV——SURF特征检测、匹配与对象查找

    SURF原理详解:https://wenku.baidu.com/view/2f1e4d8ef705cc1754270945.html SURF算法工作原理 选择图像中的POI(Points of i ...