使用 Vuex + Vue.js 构建单页应用【新篇】

在去年的七月六号的时候,发布了一篇 使用 Vuex + Vue.js 构建单页应用 的文章,文章主要是介绍 vuex 的基本使用方法,发现对大部分的入门同学有很大的帮助,时至今日还有很多同学不断的点赞与收藏,浏览量最高达到 20.4K 。鉴于前端技术发展更新快速,特此在这里重新整理一篇 vue2.0 版本的 vuex 基本使用方法,希望能给更多刚入门或者将要入门的同学带来帮助。

这篇文章主要是介绍最新 vue2.0 API 的使用方法, 和 vue1.x 的一些差异的地方。

阅读建议

1、在阅读这篇文章之前,我希望你已经阅读过我上一篇文章 使用 Vuex + Vue.js 构建单页应用 ,明白我们需要实现的基本需求。

2、希望你阅读并掌握以下知识点

目录层级变化

首先是目录层级的变动,我们看下前后对比:

2.0 版本,vuex 的文件夹改为了 store

  1. ├── index.html
  2. ├── src
  3.    ├── App.vue
  4.    ├── assets
  5.       └── logo.png
  6.    ├── components
  7.       ├── Editor.vue
  8.       ├── NoteList.vue
  9.       └── Toolbar.vue
  10.    ├── main.js
  11.    └── store
  12.    ├── actions.js
  13.    ├── getters.js
  14.    ├── index.js
  15.    ├── mutation-types.js
  16.    └── mutations.js
  17. └── static

1..0 版本

  1. ├── index.html
  2. ├── src
  3.    ├── App.vue
  4.    ├── assets
  5.       └── logo.png
  6.    ├── components
  7.       ├── Editor.vue
  8.       ├── NotesList.vue
  9.       └── Toolbar.vue
  10.    ├── main.js
  11.    └── vuex
  12.    ├── actions.js
  13.    ├── getters.js
  14.    └── store.js
  15. └── static

使用方式的变动

在文件的 main.js 中注入,2.0 的注入方式如下

  1. import Vue from 'vue'
  2. import App from './App'
  3. import store from './store';
  4. Vue.config.productionTip = false
  5. /* eslint-disable no-new */
  6. new Vue({
  7. el: '#app',
  8. template: '<App/>',
  9. store,
  10. components: { App }
  11. })

在组件中使用方式

我们来看 Editor.vue 组件内部如何使用 vuex

  1. <template>
  2. <div class="note-editor">
  3. <div class="form-group">
  4. <input type="text" name="title"
  5. class="title form-control"
  6. placeholder="请输入标题"
  7. @input="updateNote"
  8. v-model="currentNote.title">
  9. <textarea
  10. v-model="currentNote.content" name="content"
  11. class="form-control" row="3" placeholder="请输入正文"
  12. @input="updateNote"></textarea>
  13. </div>
  14. </div>
  15. </template>
  16. <style>
  17. ...
  18. </style>
  19. <script>
  20. import { mapState, mapActions, mapGetters } from 'vuex';
  21. export default {
  22. name: 'Editor',
  23. computed: {
  24. ...mapGetters([
  25. 'activeNote'
  26. ]),
  27. currentNote() {
  28. return this.activeNote;
  29. }
  30. },
  31. methods: {
  32. ...mapActions({
  33. update: 'updateNote'
  34. }),
  35. updateNote() {
  36. this.update({
  37. note: this.currentNote
  38. });
  39. }
  40. }
  41. }
  42. </script>

由于我们在入口文件 main.js 中已经注入 store 对象,使得我们能够在子组件中获取到它,在这里,我们使用了 vuex 提供的三个扩展方法 mapStatemapActionsmapGetters

另外一个不同点是在我们的 NodeList.vue 组件中,在 vue2.0 里面已经移除了自带的过滤器函数,官方建议我们使用计算属性,下面是我们更改后的使用方法:

  1. <template>
  2. <div class="notes-list">
  3. <div class="list-header">
  4. <h2>Notes | heavenru.com</h2>
  5. <div class="btn-group btn-group-justified" role="group">
  6. <!-- all -->
  7. <div class="btn-group" role="group">
  8. <button type="button" class="btn btn-default"
  9. @click="toggleShow('all')"
  10. :class="{active: show === 'all'}">All Notes</button>
  11. </div>
  12. <!-- favorites -->
  13. <div class="btn-group" role="group">
  14. <button type="button" class="btn btn-default"
  15. @click="toggleShow('favorite')"
  16. :class="{active: show === 'favorite'}">Favorites</button>
  17. </div>
  18. </div>
  19. <div class="btn-group btn-group-justified" role="group">
  20. <div class="input-group search">
  21. <input type="text" class="form-control" v-model="search" placeholder="Search for...">
  22. <span class="input-group-addon">
  23. <i class="glyphicon glyphicon-search"></i>
  24. </span>
  25. </div>
  26. </div>
  27. </div>
  28. <!-- 渲染笔记列表 -->
  29. <div class="container">
  30. <div class="list-group">
  31. <div
  32. v-for="(note, index) in searchNotes" :key="index"
  33. class="list-group-item"
  34. :class="{active: activeNote === note}"
  35. @click="updateActiveNote(note)">
  36. <h4 class="list-group-item-heading">
  37. {{note.title.trim().substring(0,30)}}
  38. </h4>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. </template>
  44. <style scoped>
  45. ...
  46. </style>
  47. <script>
  48. import { mapGetters, mapState, mapActions } from 'vuex';
  49. export default {
  50. name: 'NoteList',
  51. data() {
  52. return {
  53. search: ''
  54. }
  55. },
  56. computed: {
  57. ...mapGetters([
  58. 'filteredNotes'
  59. ]),
  60. // state 内部状态
  61. ...mapState([
  62. 'show',
  63. 'activeNote'
  64. ]),
  65. // 计算属性,自定义过滤
  66. searchNotes() {
  67. if (this.search.length > 0) {
  68. return this.filteredNotes.filter((note) => note.title.toLowerCase().indexOf(this.search) > -1);
  69. } else {
  70. return this.filteredNotes;
  71. }
  72. }
  73. },
  74. methods: {
  75. ...mapActions([
  76. 'toggleListShow',
  77. 'setActiveNote'
  78. ]),
  79. // 切换列表,全部或者收藏
  80. toggleShow(type) {
  81. this.toggleListShow({ show: type});
  82. },
  83. // 点击列表,更新当前激活文章
  84. updateActiveNote(note) {
  85. this.setActiveNote({ note });
  86. }
  87. }
  88. }
  89. </script>

Q&A

其他的变动,大家自行的查看源码学习:vuex-notes-app2

使用 Vuex + Vue.js 构建单页应用【新篇】的更多相关文章

  1. 使用 Vuex + Vue.js 构建单页应用

    鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...

  2. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  3. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  4. 基于VUE的SPA单页应用开发-加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  5. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  6. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  7. 借助 Vue 来构建单页面应用

    原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...

  8. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  9. require.js实现单页web应用(SPA)

    本文转载自:https://blog.csdn.net/qq_33401924/article/details/53815922 移动端单页应用基本上是做移动端最流行的的方式了,但是对于很多前端来说, ...

随机推荐

  1. 解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题

    用webstorm调试页面时,老是弹出对话框说页面未授权,如下图: 解决方法尝试了两种都有效,感觉第一种是正解通用,第二种大家也可以了解一下作为参考 第一种: File--Settings如下图 第二 ...

  2. JZ-004-重建二叉树

    重建二叉树 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序 ...

  3. CLR的GC工作模式介绍(Workstation和Server)

    CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...

  4. Nebula Graph 在企查查的应用

    本文首发于 Nebula Graph Community 公众号 背景 企查查是企查查科技有限公司旗下的一款企业信用查询工具,旨在为用户提供快速查询企业工商信息.法院判决信息.关联企业信息.法律诉讼. ...

  5. LGP3281口胡

    当你看到一个东西的时候,GF 有可能比 DP 更方便.处理贡献也有可能比 DP 更方便. 这个题意明显是让我们计算 \(S(r)-S(l-1)\) 之类的东西( 所以直接考虑前缀的答案就好了( 考虑将 ...

  6. LGP7840题解

    给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...

  7. python爬虫-使用线程池与使用协程的实例

    背景:爬取豆瓣电影top250的信息 使用线程池 import re from concurrent.futures import ThreadPoolExecutor import requests ...

  8. Java UDP 编程

    1.客户端代码 1 import java.io.IOException; 2 import java.net.DatagramPacket; 3 import java.net.DatagramSo ...

  9. Spring 中的 bean线程安全性分析

    首先:Spring 中的 bean不是线程安全的 Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全的特性,但 ...

  10. STM32芯片去除读写保护 | 使用ST-Link Utility去除STM32芯片读写保护

    1.使用ST-LINK V2下载器连接到STM32芯片, 点击Connect: 2.存在读保护: 3.修改选项字节(Option Bytes... ): 4.将读保护修改为Disabled. 5.打钩 ...