简单的三步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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue设置默认首页的操作
Aug 12 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中调用其他系统http接口的方法说明
2014/02/28 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
为什么说python适合写爬虫
2020/06/11 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
思想汇报范文
2013/11/04 职场文书
党员培训思想汇报
2014/01/07 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python