简单的三步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 相关文章推荐
JavaScript confirm选择判断
Oct 18 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
js实现随机圆与矩形功能
Oct 29 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
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP中SESSION过期设置
2021/03/09 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
js实现背景图自适应窗口大小
2017/01/10 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python多线程http下载实现示例
2013/12/30 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Django models文件模型变更错误解决
2020/05/11 Python
python3的pip路径在哪
2020/06/23 Python
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
局域网标准
2016/09/10 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
三查三看党性分析材料
2014/02/18 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
德生2P3收音机开箱评测
2022/04/30 无线电