Vue.js实战之Vuex的入门教程


Posted in Javascript onApril 01, 2017

前言

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式,详细点击这篇文章查看。

但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。

一、安装并引入 Vuex

项目结构:

Vue.js实战之Vuex的入门教程

首先使用 npm 安装 Vuex

cnpm install vuex -S

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 store,
 render: h => h(App)
})

二、构建核心仓库 store.js

Vuex 应用的状态 state 都应当存放在 store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。

在 src 目录下创建一个 vuex 目录,将 store.js 放到 vuex 目录下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 // 定义状态
 state: {
 author: 'Wise Wrong'
 }
})

export default store

这是一个最简单的 store.js,里面只存放一个状态 author

虽然在 main.js 中已经引入了 Vue 和 Vuex,但是这里还得再引入一次

三、将状态映射到组件

<template>
 <footer class="footer">
 <ul>
  <li v-for="lis in ul">{{lis.li}}</li>
 </ul>
 <p>
  Copyright © {{author}} - 2016 All rights reserved
 </p>
 </footer>
</template>

<script>
 export default {
 name: 'footerDiv',
 data () {
  return {
  ul: [
   { li: '琉璃之金' },
   { li: '朦胧之森' },
   { li: '缥缈之滔' },
   { li: '逍遥之火' },
   { li: '璀璨之沙' }
  ]
  }
 },
 computed: {
  author () {
  return this.$store.state.author
  }
 }
 }
</script>

这是 footer.vue 的 html 和 script 部分

主要在 computed 中,将 this.$store.state.author 的值返回给 html 中的 author

页面渲染之后,就能获取到 author 的值

Vue.js实战之Vuex的入门教程

四、在组件中修改状态

然后在 header.vue 中添加一个输入框,将输入框的值传给 store.js 中的 author

这里我使用了 Element-UI 作为样式框架

Vue.js实战之Vuex的入门教程

上面将输入框 input 的值绑定为 inputTxt,然后在后面的按钮 button 上绑定 click 事件,触发 setAuthor 方法

methods: {
 setAuthor: function () {
 this.$store.state.author = this.inpuTxt
 }
}

在 setAuthor 方法中,将输入框的值 inputTxt 赋给 Vuex 中的状态 author,从而实现子组件之间的数据传递

Vue.js实战之Vuex的入门教程

五、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author,但是 vue 官方推荐使用下面的方法:

Vue.js实战之Vuex的入门教程

首先在 store.js 中定义一个方法 newAuthor,其中第一个参数 state 就是 $store.state,第二个参数 msg 需要另外传入

然后修改 header.vue 中的 setAuthor 方法

Vue.js实战之Vuex的入门教程

这里使用 $store.commit 提交 newAuthor,并将 this.inputTxt 传给 msg,从而修改 author

这样显式地提交(commit) mutations,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Ajax基础知识详解
Feb 17 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
AngularJS页面传参的5种方式
Apr 01 #Javascript
vue2.0构建单页应用最佳实战
Apr 01 #Javascript
vue货币过滤器的实现方法
Apr 01 #Javascript
javascript 中的try catch应用总结
Apr 01 #Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 #Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 #Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 #Javascript
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP中串行化用法示例
2016/11/16 PHP
javascript Keycode对照表
2009/10/24 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
Python中asyncio模块的深入讲解
2019/06/10 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python实现126邮箱发送邮件
2020/05/20 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
职称评定个人总结
2015/03/05 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书