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

更多专业前端知识，请上【猿2048】www.mk2048.com

Vuex的第一次接触相关推荐

vue中常碰见的坑_Vue 与 Vuex 的第一次接触遇到的坑
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便 ...
（转）Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
Vue 爬坑之路（四）—— 与 Vuex 的第一次接触
2019独角兽企业重金招聘Python工程师标准>>> 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 htt ...
第一次接触终极事务处理——Hekaton
在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...
Project Pacific的第一次接触(转）
这是己亥年的最后一篇公众号更新,想谈谈自己与VMware Pacific产品的第一次接触,提供一些配置的参考,感兴趣的朋友们可以一起对照着在自己的环境中进行模拟. 首先我们来看几张演示用例: 这可能是 ...
百度地图API的第一次接触
因为项目的需求,第一次接触了百度API. 第一步:引用百度地图API的脚本如果在局域网环境中,要把地图文件和js文件都要下载下来 <script type="text/javascr ...
第一次接触APK【破解纪实】
前言昨天刚把公司任务弄得差不多.同事想学粤语,下了一款XX粤语手机APP,让我帮他弄下.之前也没接触过APK,这次就当学习好了. 先下个JDK装好再把Android SDK NDK统统装好,配置 ...
家电售后php网站源码,php家电维修源码-第一次接触php语言的最经典，最简单的源代码！！！！！！！！！！-电气资讯 - 电工屋...
如何修改PHP的源码 PHP源码用记事本就可打开编辑了,当然用DW也可以.图片背景要改,可要看清图片的链接(或者直接将图片改成你要的图片也可),改文字格式要通过CSS来修改,链接的话,应该在网站后台就 ...
第一次接触炒外汇如何快速上手？
假如你是第一次听说炒外汇,从来没有接触过,你觉得应该如何学习呢?当然,找个老师教学最快的,但师傅领进门修行靠个人,你还得花时间学习和领悟.如果没有人带,自己摸索,大多小伙伴都没少浪费时间和给市场交学费 ...

Vuex的第一次接触

Vuex的第一次接触相关推荐

最新文章

热门文章