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 动态添加事件代码
Nov 30 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery制作多功能轮播图插件
2015/04/02 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
jQuery位置选择器用法实例分析
2019/06/28 jQuery
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python生成随机数组的方法小结
2017/04/15 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python实现AES加密和解密
2019/03/27 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
为什么说python适合写爬虫
2020/06/11 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
化工见习报告范文
2014/10/31 职场文书
邀请函范文
2015/02/02 职场文书
上课迟到检讨书
2015/05/06 职场文书
惊天动地观后感
2015/06/10 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android