vuex其实超简单,只需3步
前言
之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,
event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么,
团队里的一些新人一听到vuex,就开始退缩了, 因为vuex 很难? 真的很难吗?
今天我们用简单的3步来证明一下,vuex有多简单.
纯属个人经验,难免有不正确的地方,如有发现,欢迎指正!
这是一个针对新手的入门级教程、入门级教程、入门级教程
第零步
新建一个vue项目,安装vuex,这里不做过多介绍,能点进来的,默认你具备这些技能 ^_^
第一步
新建一个.js
文件,名字位置任意,按照惯例,建议在/src/store
目录下(没有的话自己新建一个呗)
文件位置 /src/store/index.js
// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)// 直接导出 一个 Store 的实例
export default new Vuex.Store({// 类似 vue 的 datastate: {name: 'oldName'},// 类似 vue 里的 mothods(同步方法)mutations: {updateName (state) {state.name = 'newName'}}
})
代码看起来稍微有那么一点点多,不过看起来是不是很熟悉? 跟普通的 vue 没多大差别嘛.
这一步其实就是新建一个store,但是我们还没在项目中使用.
第二步
在入口文件引入上述文件, 并稍微改一下传给 new Vue()的参数,新增的行后面有备注
文件位置 /src/main.js
(vue-cli自动生成的入口,如果你能不用脚手架,那么也就不需要我说明了)
import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增new Vue({el: '#app',store:vuexStore // 新增components: { App },template: '<App/>'
})
Tip: import store from './store' 后面的地址,就是上面我们新建那个文件的位置(
/src/store/index.js
),
因为我这里是index.js,所以可以省略.
第三步
以上2步,其实已经完成了vuex的基本配置,接下来就是使用了
文件位置 /src/main.js
(同样是vue-cli生成的app.vue,这里为了方便演示,我去掉多余的代码)
<template><div>{{getName}}<button @click="changeName" value="更名">更名</button></div>
</template><script>
import HelloWorld from './components/HelloWorld'export default {computed:{getName(){return this.$store.state.name}},methods:{changeName () {this.$store.commit('updateName')}}
}
</script>
这里就是一个很普通的vue文件了,有区别的地方是这里我们需要用computed属性去获取 store 里的 "data"
还有就是我们要改变数据的话,不再用 this.xxx = xxx
改成 this.$store.commit('updateName')
总结
你可能会觉得,上例这样做的意义何在,为何不直接用vue的data跟methods?
上例只是为了简单讲解如何使用vuex,所以简化了一些流程,试想一下,如果你有这样一个页面:
一共嵌套了10层组件(即子组件里面还有子子组件,子子组件下面还有子子子组件,以此类推10层)
然后最后一层组件一个数据改变了,要通知第一层组件的时候,我们只需在最底层组件里this.$store.commit()
,
然后再最外层组件上用computed属性获取对应的值,就能做到实时更新.无需层层$emit上去.
最后
本来想在最后再扩展一下getter,action+dispatch,模块化等等,不过为了对得起这个标题,
只好放在 下一篇:vuex其实超简单,喝完这3步,还有3步
如果觉得本文对您有用,请给本文的github加个star,万分感谢
另外,github上还有其他一些关于前端的教程和组件,有兴趣的童鞋可以看看,你们的支持就是我最大的动力。
vuex其实超简单,只需3步相关推荐
- python螺旋圆的绘制_亦明图记:SolidWorks绘制异形弹簧圈,操作简单只需三步就可完成...
3d异形弹簧圈模型:使用SolidWorks2014绘制: 点击文章末尾的了解更多,观看视频讲解过程. 绘制过程: 1.在上视基准面上绘制草图 圆:直径50:圆心与原点重合: 2.再次在上视基准面上绘 ...
- UG模具:简单的运动仿真!只需七步,就让轮子转起来!
UG模具:简单的运动仿真!只需七步,就让轮子转起来! 今天带大家了解一下UG中的运动仿真,如下图,让轮子转起来(这个轮子自己画一下即可).很简单的操作,看完这七步,你也可以在UG中做些简单的运动仿真了 ...
- 微信新玩法,只需三步就可以在朋友圈发送竖排文字,好看又酷炫!
很多小伙伴喜欢用微信朋友圈来记录生活中的点点滴滴,那么如何才能让自己的动态在朋友圈中看起来与众不同呢? 今天给小伙伴们分享一个有意思的微信小程序,只需几步就能设置竖排文字,效果超棒,赶快一起学起来吧! ...
- 在线qmc0转换mp3工具_如何将M4A格式的音频转换为MP3格式?只需一步搞定
随着网络技术的发达,会有很多人喜欢在网上下载东西,特别是很喜欢在网上下载音乐,但是下载音乐之后发现是M4A格式?这样用起来很不方便,都喜欢MP3格式的,那么如何将M4A格式的音频转换为MP3格式?今天 ...
- AI帮你写Python,安装只需5步,还能任你调教 | 开源
鱼羊 发自 凹非寺 量子位 报道 | 公众号 QbitAI 一行一行地敲代码就像是徒手搬砖,聪明的程序猿们表示:我们要解放生产力! 比如像这样: 在机器学习的时代,AI智能补全代码早已不是梦想,各种 ...
- iphone看python文件_Python实战 | 只需 ”三步“ 爬取二手iphone手机信息(转发送源码)...
原标题:Python实战 | 只需 "三步" 爬取二手iphone手机信息(转发送源码) 本次实战是爬取二手苹果手机的信息,共爬取了300部手机信息,效果如下: 开发环境 环境:M ...
- 如何将瀑布流里的图片加链接_只需5步!魔幻丛林瀑布后期揭秘
去年的旅行,我跋山涉水,翻山越岭,探索了很多的幽谷密林. "海蓝时见鲸,林深处遇水"我记录下了很多瀑布的影像. 下面是一组后期处理前后的对比图 如何将原本干涩直白的画风打造出如梦游 ...
- 工控机的io开发_Amazing!从树莓派4B主板到嵌入式无风扇工控机,只需三步!
因应现今工业物联网的趋势,为满足广大树莓派开发者工业App应用落地的需求,研华推出了基于Raspberry Pi 4的工业级网关套件UNO-220. UNO-220工业树莓派网关套件,包含一套工业级的 ...
- 安卓手机反应越来越慢怎么办_安卓手机运行慢怎么办 只需几步轻松提升安卓手机速度...
当手机进入到智能时代后,以前我们不是很关注的手机硬件,现在开始变得关注并且是越来越受关注了,在那个非智能时代手机流畅度对我们来说好像并不这么重要,我们更多关心是否支持蓝牙.MP3等等功能,因为一般对于 ...
最新文章
- html 模板引擎 热部署,springboot系列四、配置模板引擎、配置热部署
- leetcode算法题--句子中的有效单词数
- Redis 数据结构的实现
- 蘑菇街2019校招题目总结
- css float属性 与 clear属性 的深入了解
- ATTILAX项目进展表VC425
- 旅游景点网站景区景点购票系统毕业设计毕业论文参考(3)后台管理功能
- 【分享】深入浅出WPF全系列教程及源代码
- mht转html保留图片,【JAVA】mht文件转html
- 对话深喉:中小App如何突围?(开发者必看)
- matlab 判断鼠标按下_如何让MATLAB控制你的鼠标和键盘
- BAPI_PRODORDCONF_GET_TT_PROP 生产订单完工确认
- JS--input不可编辑
- C字符串操作strlen/strnlen_s详解
- 队列(一种遵循先进先出原则的数据结构)
- 金庸武功之““兰花拂穴手””--elk5.5安装
- 给软件添加注册码【笔记】
- springboot2.7集成spring-boot-starter-data-elasticsearch
- 知识付费项目怎么做?具体操作方法详解!
- GHOST XP仿VISTA版8.1[毛玻璃效果]
热门文章
- python代码段有什么用_25个超有用的Python代码段
- python监听键盘输入_Python监听模拟鼠标键盘
- amoeba mysql_使用Amoeba 实现MySQL DB 读写分离
- c字段和属性的区别_如何将唯一属性类字段设置为不允许重复?
- Ubuntu启动显示System program problem detected 原因及解决方法
- Spark学习笔记:索引分区映射
- 大数据学习笔记26:MR案例——双重排序(先按月份升序,再按利润降序)
- 【BZOJ3048】Cow lineup,贪心+队列维护(或二分答案)
- vb mysql边记录边统计_vb6 数据库 增加记录
- 【英语学习】【WOTD】horticulture 释义/词源/示例