首先使用vue-cli把环境搭建好。

介绍一下应用的界面。

App.vue根组件,就是整个应用的最外层

Toolbar.vue:最左边红色的区域,包括三个按钮,添加、收藏、删除。

NoteList.vue:中间蓝色区域,笔记列表。

Editor.vue:最右边紫色区域,编辑区域。

第一步 安装vuex

cnpm install vuex -g --save-dev 

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

为什么要用到Vuex?

以下是一个表示“单向数据流”理念的极简示意:

但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想,借鉴了 FluxRedux、和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

在本项目中,有三个组件需要共享笔记列表这一状态,传统的解决方案也可行,但是会非常冗杂,使用vuex可以帮助我们简化代码。

每一个 Vuex 应用的核心就是 store(仓库)。"store" 基本上就是一个容器,它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同:

    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

看下我们的vuex目录下的store.js的部分核心代码

所有组件共享state中的数据。

notes数组作为笔记列表。

activeNote对象为当前选择的笔记。

favornotes列表为收藏的笔记。

mutations中定义了一系列方法,这些方法怎么跟平常的function不一样,那我们怎么调用它呢?

这是Toolbar.vue文件,我们看到当我们点击添加按钮的时候,我们会调用addNote函数,执行this.$store.commit('ADD_NOTE')。

就像文档中所说的那样:

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。

$store是什么呢?

我们来看一下main.js中的代码

我们引入了store.js并将它传入到Vue实例中,所以我们就可以通过this.$store调用。

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

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

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

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

    上一篇我们简单介绍了vuex在此项目中的作用. 这次来理一下项目的整体思路. main.js上次看过了,首先看App.vue文件 我们引入了Toolbar.vue,NodeList.vue,Edito ...

  3. webp图片实践之路

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

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

    程序设计语言--实践之路>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382240 内容简介 本书在美国大学已有使用了十余年,目前被欧 ...

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

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

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

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

  7. WebP 图片实践之路

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

  8. Followme Devops实践之路

    引言 天下武功,唯快不破 想要提高开发团队效率,势必要有一套完整而成熟的开发流程方案,除了sprint迭代开发模式之外,还有近几年流行的devops流程,都是可以大幅度提高开发效率的工具. 我们团队也 ...

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

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

随机推荐

  1. 表的垂直拆分和水平拆分-zz

    https://www.kancloud.cn/thinkphp/mysql-design-optimalize/39326 http://www.cnblogs.com/nixi8/tag/mysq ...

  2. python自学——函数-strftime

    strftime()函数的用法   strftime()函数可以把YYYY-MM-DD HH:MM:SS格式的日期字符串转换成其它形式的字符串. strftime()的语法是strftime(格式, ...

  3. js经典应用

    一.js字符串转数字: 1.parseInt()和parseFloat()两个转换函数: 2.强制类型转换,Number(value)——把给定的值转换成数字(可以是整数或浮点数): 3.利用js变量 ...

  4. Bitlocker驱动器加密使用

      前言 Bitlocker驱动器加密可以将磁盘加密,确保数据的安全.如果被加密保护的磁盘是Windows Server 2012操作系统磁盘,即使他被拿到另外一台计算机启动,除非已解锁,否则无法启动 ...

  5. 数据库迁移之从oracle 到 MySQL最简单的方法

    数据库迁移之从oracle 到 MySQL最简单的方法 因工作需要将oracle数据库换到MySQL数据库,数据量比较大,百万级别的数据,表也比较多,有没有一种既快捷又安全的方法呢?答案是肯定的,下面 ...

  6. DevExpress06、Popup Menus、RadialMenu、XtraTabControl、SplitContainerControl、GroupControl

    Popup Menus 弹出菜单 使用弹出菜单(popup menus),我们可以在   控件上   显示   上下文选项   或  命令. 弹出菜单是一个显示了特定项的窗体,用户可以选择这些项以执行 ...

  7. 【Alpha Go】Day 1 !

    [Alpha Go]Day 1 ! Part 0 · 简要目录 Part 1 · 任务分配 Part 2 · 他日安排 Part 3 · 预期任务量 Part 4 · 团队贡献值计算原则 Part 1 ...

  8. saltstack二次开发(二)

    Saltstack的api Salt-api有两种方式,一种是函数的形式,有人家定义好的函数,我们可以直接调用,直接写python代码调用函数或者类就可以了.第二种形式是salt-api有封装好的ht ...

  9. 基于duxshop遍历无限级分销用户的纵向递归

    /**获取基准数据 * @param $ids 父id 多个逗号分隔 * @return array */ public function saleBase($ids) { $data=$this-& ...

  10. BZOJ4810:[YNOI2017]由乃的玉米田(莫队,bitset)

    Description 由乃在自己的农田边散步,她突然发现田里的一排玉米非常的不美.这排玉米一共有N株,它们的高度参差不齐. 由乃认为玉米田不美,所以她决定出个数据结构题   这个题是这样的: 给你一 ...