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 (完整学习过程屏幕记录视频地址在文末) 之前对关系型数据库的学习告一段落,虽然能力所限没有能够完全完成理想中的所有数据库操 ...
随机推荐
- 【Python】raw转义字符
r"hi" 这里字符串前面加了r,是raw的意思,它表示对字符串不进行转义.为什么要加这个?你可以试试print "\bhi"和r"\bhi" ...
- 关于安卓开发的学习一:webview
在网上看到几篇不错的博客,分享和学习一下! Android使用WebView加载网页 https://blog.csdn.net/tuke_tuke/article/details/51684254 ...
- 【转】Spark on Yarn遇到的几个问题
本文转自 http://www.cnblogs.com/Scott007/p/3889959.html 1 概述 Spark的on Yarn模式,其资源分配是交给Yarn的ResourceManage ...
- mongodb数据库集合操作
1:更新update update() 方法用于更新已存在的文档.语法格式如下: db.collection.update( <query>, <update>, { upse ...
- [转]优化IIS7.5支持10万个同时请求的配置方法
通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅 通过对IIS7的配置进行优化,调整IIS7应 ...
- mysql获取表列信息、主键信息
/** * 获取物理表中已存在的列信息 * @param tbName 表名 * @return results 查询结果 */ fun getExistColumnInfo(tbName:Strin ...
- QT写hello world 以及信号槽机制
QT是一个C++的库,不仅仅有GUI的库.首先写一个hello world吧.敲代码,从hello world 写起. #include<QtGui/QApplication> #incl ...
- CentOS下go 安装
go 语言源码安装依赖 ,gcc ,make glibc库,等,上述工具安装省略,另外,其源代码更新采用的是mercurial 工具,安装前先安装mercureal : 1.mercurial安 ...
- 【[CQOI2014]数三角形】
lx让做的题,其实很简单,难度评到紫令人吃惊 首先读进来\(n,m\)先\(++\),之后就是一个格点数为\(n*m\)的矩阵了 我们直接求很那做,补集转化一下,我们容斥来做 首先所有的情况自然是\( ...
- [19/03/29-星期五] IO技术_File(文件)类(可操作文件,不能操作其里边内容,位于Java.io 包中)&递归遍历
一.概念 java.io.File类:代表文件和目录. 在开发中,读取文件.生成文件.删除文件.修改文件的属性时经常会用到本类. 以pathname为路径创建File对象,如果pathname是相对路 ...