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 动态将数字金额转化为中文大写金额
May 14 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
完善的jquery处理机制
2016/02/21 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
js精确的加减乘除实例
2017/11/14 Javascript
javascript中的隐式调用
2018/02/10 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Django中的Model操作表的实现
2018/07/24 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
网站开发实习生的自我评价
2013/12/11 职场文书
工程管理英文求职信
2014/03/18 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis