Vuex的第一次接触
前言:最近在做Vue实现去哪网,想要实现在城市列表页面,点击某个城市的时候,主页的头部的城市会随着改变,就是首页和城市页面有共用的数据要分享,这里使用Vuex
1. Vuex是什么?
是Vue官方推荐的数据框架,就是单向数据的改变流程
Vuex的设计理念:当项目中需要多个组件的复杂传值困难时,如果把公用的数据放到一个公共空间去存储,有一个组件改变了公共的数据,其他组件就能感知到
2. Vuex流程图
图中虚线部分是一个store仓库,由state actions mutations三部分组成,
state中存放所有的公用数据,组件中使用公用数据可以直接调用state;
actions中存放异步操作或者批量的同步操作;
mutations中存放一个个同步的对state的修改
想要改变state的数据,不能直接让组件去改变公用数据,必须走一个流程,
组件先去调用actions,actions再去调用mutations,最终改变state的值,也可以略过actions,直接调用mutations
3. Vuex的使用
第一步:安装 npm install vuex --save
第二步:在main中引入vuex,这里把vuex放在了一个单独的文件夹store中
文件store/index.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: '北京'
}
})
主页的Header.vue中调用state中数据
<router-link to="/city">
<div class="header-right">
{{this.$store.state.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
list列表页绑定一个点击事件
store/index.js
Vuex的第一次接触的更多相关文章
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- (转)Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- Vue ---- Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- 第一次接触终极事务处理——Hekaton
在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...
- [译]与TensorFlow的第一次接触(三)之聚类
转自 [译]与TensorFlow的第一次接触(三)之聚类 2016.08.09 16:58* 字数 4316 阅读 7916评论 5喜欢 18 前一章节中介绍的线性回归是一种监督学习算法,我们使用数 ...
- 第一次接触FPGA至今,总结的宝贵经验
从大学时代第一次接触FPGA至今已有10多年的时间,至今记得当初第一次在EDA实验平台上完成数字秒表.抢答器.密码锁等实验时那个兴奋劲.当时由于没有接触到HDL硬件描述语言,设计都是在MAX+plus ...
- Hybird App(一)----第一次接触
App你知道多少 一 什么是Native App 长处 缺点 二 什么是Web App 长处 缺点 三 什么是Hybrid App 长处 缺点 四 Web AppHybrid AppNative Ap ...
- 第一次接触C++------感触
2018/09/24 上大学第一次接触C++,感觉还挺有趣的. C语言是计算机的一门语言,顾名思义,语言嘛,有它自己独特的语法. 第一次用C++敲代码,觉得还挺不错的,可以从中找到乐趣.咏梅老师布置的 ...
- 孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase
孤荷凌寒自学python第五十天第一次接触NoSql数据库_Firebase (完整学习过程屏幕记录视频地址在文末) 之前对关系型数据库的学习告一段落,虽然能力所限没有能够完全完成理想中的所有数据库操 ...
随机推荐
- VC学习笔记----STL库
STL = Standard Template Library,标准模板库,惠普实验室开发的一系列软件的统称.它是由Alexander Stepanov.Meng Lee和David R Muss ...
- dom操作排他思想
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何为Android平台编译 opencv3 和 opencv_contrib (Linux)
编译出来的opencv库有问题,正在调试中 ...... 本文以编译opencv 3.3.0 和 opencv_contrib 3.3.0为例,系统为 Linux x64 (Fedora 21),具体 ...
- 微软发布SQL Server on Linux
本文参考并翻译自:微软云计算与企业执行副总裁Scott Guthrie的博客. 过去的一年,不管是对于微软的数据业务,还是整个行业,都是令人惊喜的一年.在周四刚于纽约举行的Data Driven活动中 ...
- Microsoft Office ->> 完整卸载Office 2007
今天用GHOST安装了Windows 8.1,结果发现预装了Office 2007,而且这个GHOST系统的Office 2007还不是很正规的安装手法安装的.它没有在注册表中注册.在打开控制面板后发 ...
- M-wordL-图
典型的需要使用图模型 将start 和 end 以及字典一同构建成图,然后探究从start到end的最短路径
- 小程序——使用Easy Mock
使用Easy Mock 一.什么是Easy Mock Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务.在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用Java ...
- 017random模块
import randomprint(random.random())print(random.randint(1,8)) #包括8 print(random. ...
- 郝斌 SqlServer2005 学习笔记
1.0 什么是数据库 狭义:存储数据的仓库. 广义:可以对数据进行存储和管理的软件以及数据本身统称为数据库. 另外一种说法:数据库是由表.关系.操作组成. 2.0 为什么要学习数据库 几乎所有的应用软 ...
- Django 导出csv文件 中文乱码问题
import csvimport codecsimport datetimefrom django.db import connectionfrom django.contrib.auth.model ...