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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
微信JS SDK接入的几点注意事项(必看篇)
Jun 23 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
react实现复选框全选和反选组件效果
Aug 25 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内存不够用的快速解决方法
2013/10/26 PHP
smarty简单分页的实现方法
2014/10/27 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
javascript回调函数详解
2018/02/06 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
python 6种方法实现单例模式
2020/12/15 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
市场营销专科应届生求职信
2013/11/24 职场文书
中学家长会邀请函
2014/01/17 职场文书
教师自我反思材料
2014/02/14 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android