使用 Vuex + Vue.js 构建单页应用【新篇】
使用 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
├── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Editor.vue
│ │ ├── NoteList.vue
│ │ └── Toolbar.vue
│ ├── main.js
│ └── store
│ ├── actions.js
│ ├── getters.js
│ ├── index.js
│ ├── mutation-types.js
│ └── mutations.js
└── static
1..0 版本
├── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ ├── Editor.vue
│ │ ├── NotesList.vue
│ │ └── Toolbar.vue
│ ├── main.js
│ └── vuex
│ ├── actions.js
│ ├── getters.js
│ └── store.js
└── static
使用方式的变动
在文件的 main.js
中注入,2.0 的注入方式如下
import Vue from 'vue'
import App from './App'
import store from './store';
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
store,
components: { App }
})
在组件中使用方式
我们来看 Editor.vue
组件内部如何使用 vuex
的
<template>
<div class="note-editor">
<div class="form-group">
<input type="text" name="title"
class="title form-control"
placeholder="请输入标题"
@input="updateNote"
v-model="currentNote.title">
<textarea
v-model="currentNote.content" name="content"
class="form-control" row="3" placeholder="请输入正文"
@input="updateNote"></textarea>
</div>
</div>
</template>
<style>
...
</style>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
name: 'Editor',
computed: {
...mapGetters([
'activeNote'
]),
currentNote() {
return this.activeNote;
}
},
methods: {
...mapActions({
update: 'updateNote'
}),
updateNote() {
this.update({
note: this.currentNote
});
}
}
}
</script>
由于我们在入口文件 main.js
中已经注入 store
对象,使得我们能够在子组件中获取到它,在这里,我们使用了 vuex
提供的三个扩展方法 mapState
、mapActions
、mapGetters
。
另外一个不同点是在我们的 NodeList.vue
组件中,在 vue2.0
里面已经移除了自带的过滤器函数,官方建议我们使用计算属性,下面是我们更改后的使用方法:
<template>
<div class="notes-list">
<div class="list-header">
<h2>Notes | heavenru.com</h2>
<div class="btn-group btn-group-justified" role="group">
<!-- all -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"
@click="toggleShow('all')"
:class="{active: show === 'all'}">All Notes</button>
</div>
<!-- favorites -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default"
@click="toggleShow('favorite')"
:class="{active: show === 'favorite'}">Favorites</button>
</div>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="input-group search">
<input type="text" class="form-control" v-model="search" placeholder="Search for...">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
</div>
<!-- 渲染笔记列表 -->
<div class="container">
<div class="list-group">
<div
v-for="(note, index) in searchNotes" :key="index"
class="list-group-item"
:class="{active: activeNote === note}"
@click="updateActiveNote(note)">
<h4 class="list-group-item-heading">
{{note.title.trim().substring(0,30)}}
</h4>
</div>
</div>
</div>
</div>
</template>
<style scoped>
...
</style>
<script>
import { mapGetters, mapState, mapActions } from 'vuex';
export default {
name: 'NoteList',
data() {
return {
search: ''
}
},
computed: {
...mapGetters([
'filteredNotes'
]),
// state 内部状态
...mapState([
'show',
'activeNote'
]),
// 计算属性,自定义过滤
searchNotes() {
if (this.search.length > 0) {
return this.filteredNotes.filter((note) => note.title.toLowerCase().indexOf(this.search) > -1);
} else {
return this.filteredNotes;
}
}
},
methods: {
...mapActions([
'toggleListShow',
'setActiveNote'
]),
// 切换列表,全部或者收藏
toggleShow(type) {
this.toggleListShow({ show: type});
},
// 点击列表,更新当前激活文章
updateActiveNote(note) {
this.setActiveNote({ note });
}
}
}
</script>
Q&A
其他的变动,大家自行的查看源码学习:vuex-notes-app2。
使用 Vuex + Vue.js 构建单页应用【新篇】的更多相关文章
- 使用 Vuex + Vue.js 构建单页应用
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
- 通过Web Api 和 Angular.js 构建单页面的web 程序
通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 基于VUE的SPA单页应用开发-加载性能篇
1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- React构建单页应用方法与实例
React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...
- 借助 Vue 来构建单页面应用
原文: https://github.com/MeCKodo/vue-tutorial 主题 Vue.js (1/2)Vue构建单页应用最佳实战 前言 我们将会选择使用一些vue周边的库 1.使用no ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- require.js实现单页web应用(SPA)
本文转载自:https://blog.csdn.net/qq_33401924/article/details/53815922 移动端单页应用基本上是做移动端最流行的的方式了,但是对于很多前端来说, ...
随机推荐
- 解决 Page 'http://localhost:63342/v3/js/math/math.map' requested without authorization页面未授权问题
用webstorm调试页面时,老是弹出对话框说页面未授权,如下图: 解决方法尝试了两种都有效,感觉第一种是正解通用,第二种大家也可以了解一下作为参考 第一种: File--Settings如下图 第二 ...
- JZ-004-重建二叉树
重建二叉树 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序 ...
- CLR的GC工作模式介绍(Workstation和Server)
CLR的核心功能之一就是垃圾回收(garbage collection),关于GC的基本概念本文不在赘述.这里主要针对GC的两种工作模式展开讨论和研究. Workstaction模式介绍 该模式设计的 ...
- Nebula Graph 在企查查的应用
本文首发于 Nebula Graph Community 公众号 背景 企查查是企查查科技有限公司旗下的一款企业信用查询工具,旨在为用户提供快速查询企业工商信息.法院判决信息.关联企业信息.法律诉讼. ...
- LGP3281口胡
当你看到一个东西的时候,GF 有可能比 DP 更方便.处理贡献也有可能比 DP 更方便. 这个题意明显是让我们计算 \(S(r)-S(l-1)\) 之类的东西( 所以直接考虑前缀的答案就好了( 考虑将 ...
- LGP7840题解
给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...
- python爬虫-使用线程池与使用协程的实例
背景:爬取豆瓣电影top250的信息 使用线程池 import re from concurrent.futures import ThreadPoolExecutor import requests ...
- Java UDP 编程
1.客户端代码 1 import java.io.IOException; 2 import java.net.DatagramPacket; 3 import java.net.DatagramSo ...
- Spring 中的 bean线程安全性分析
首先:Spring 中的 bean不是线程安全的 Spring容器中的Bean是否线程安全,容器本身并没有提供Bean的线程安全策略,因此可以说Spring容器中的Bean本身不具备线程安全的特性,但 ...
- STM32芯片去除读写保护 | 使用ST-Link Utility去除STM32芯片读写保护
1.使用ST-LINK V2下载器连接到STM32芯片, 点击Connect: 2.存在读保护: 3.修改选项字节(Option Bytes... ): 4.将读保护修改为Disabled. 5.打钩 ...