简单的三步vuex入门


Posted in Javascript onMay 20, 2018

前言

之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,
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 的 data
 state: {
 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,模块化等等,不过为了对得起这个标题。

分享给大家本文介绍的源码:https://github.com/noahlam/articles

Javascript 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue项目如何刷新当前页面的方法
May 18 #Javascript
原生JS实现的碰撞检测功能示例
May 18 #Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 #Javascript
vue.js使用3DES加密的方法示例
May 18 #Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 #Javascript
JS实现调用本地摄像头功能示例
May 18 #Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
You might like
PHP5 安装方法
2006/10/09 PHP
php下的权限算法的实现
2007/04/28 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
json的使用小结
2016/06/08 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
工作交流会欢迎词
2014/01/12 职场文书
标准化管理实施方案
2014/02/25 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
青春雷锋观后感
2015/06/10 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers