简单的三步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 获取URL参数的插件
Mar 04 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
javascript的BOM
May 03 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
JS 组件系列之BootstrapTable的treegrid功能
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
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
js微信分享API
2020/10/11 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
Python os模块介绍
2014/11/30 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python实现两张图片的像素融合
2019/02/23 Python
python mysql断开重连的实现方法
2019/07/26 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python判断链表是否有环的实例代码
2020/01/31 Python
2014酒店客房部工作总结
2014/12/16 职场文书
长城导游词400字
2015/01/30 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
法制主题班会教案
2015/08/13 职场文书