首先使用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. shell傳遞參數

    Shell 传递参数 我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 比如我們 ...

  2. 2018.08.31 16:26 调试 Swift 和 Pycharm 与 github 之间的链接

    花了一段时间调试Swift和Pycharm的链接,网上查了一下有关信息,再加上自己的摸索,一会就掌握了.

  3. [python] 私有变量和私有方法

    1.在Python中要想定义的方法或者变量只在类内部使用不被外部调用,可以在方法和变量前面加 两个 下划线 #-*- coding:utf-8 -*- class A(object): name = ...

  4. JAVA反射机制_获取字节码文件对象

    是在运行状态中,对于任意一个类 (class文件),都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调用对象的方法的功能称为java语 ...

  5. thinkphp5整合 gatewaywork实现聊天

    1:将下载的gatewaywork下的\vendor  下的workman文件夹,整个复制到tp5下的vendor目录下 2:tp5\application\push   新键push文件夹,将下载的 ...

  6. shiro实战系列(十)之Subject

    毫无疑问,在 Apache Shiro 中最重要的概念就是 Subject.'Subject'仅仅是一个安全术语,是指应用程序用户的特定 安全的“视图”.一个 Shiro Subject 实例代表了一 ...

  7. top,ps查看进程使用内存情况

    ps -e -o 'pid,comm,args,pcpu,vsz,stime,user,uid' |grep chrome|grep -v grepwatch 'ps -e -o 'pid,comm, ...

  8. VC++编译错误error C2065: “HANDLE”: 未声明的标识符及添加winbase.h后提示winbase.h(243): error C2146: 语法错误: 缺少“;”(在标识符“Internal”的前面)的解决办法

    问题描述: VC++程序编译时提示错误:error C2065: “HANDLE”: 未声明的标识符等众多错误提示,如下所示: error C2065: “HANDLE”: 未声明的标识符 error ...

  9. [转]学习C#:Attribute与Property

    一.什么是Attribute 先看下面的三段代码: 1.自定义Attribute类:VersionAttribute [AttributeUsage(AttributeTargets.Class)] ...

  10. jmeter JDBC connection configuration配置方式