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

在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式。

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

一、安装并引入 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 的值

 

四、在组件中修改状态

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

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

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

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

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

 

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

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

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

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

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

 

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

 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助。

来源:http://www.cnblogs.com/wisewrong/p/6344390.html

 

 

转载于:https://www.cnblogs.com/ourLifes/p/7692946.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/354698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么写公众号,为什么改名字

这是一篇水果文&#xff0c;啥叫水果文&#xff1f;比水文稍微有点内容&#xff0c;我暂时这么解释吧。最近刚刚开始决定写公众号&#xff0c;其实这个订阅号申请的还蛮早的&#xff0c;当时是为了学习开发公众号而创建的&#xff0c;所以中间有过一段空档期&#xff08;呸&…

chrome浏览器解决ajax跨域问题

方法一 1、右键谷歌快捷方式&#xff0c;选择“属性”。 2、打开属性窗口&#xff0c;切换到“快捷方式”选项卡。 3、在目标路径的后面添加【 --disable-web-security】&#xff0c;其中chrome.exe与--disable之间有一个空格 4、点击应用&#xff0c;然后点击确定关闭窗口。 5…

前端的使命来了

最近国家工信部发布了一则关于重大App进行适老化改造的政策目的在于随着互联网的普及&#xff0c;有一部分群体在互联网应用的使用上存在着一定的障碍&#xff0c;为了保证这部分人能够顺利的使用手机中的App&#xff0c;国家出手了&#xff01;现在人们的生活越来越离不开互联…

第二章 Burp Suite代理和浏览器设置

Burp Suite代理工具是以拦截代理的方式&#xff0c;拦截所有通过代理的网络流量&#xff0c;如客户端的请求数据、服务器端的返回信息等。Burp Suite主要拦截http和https协议的流量&#xff0c;通过拦截&#xff0c;Burp Suite以中间人的方式&#xff0c;可以对客户端请求数据、…

Multiavatar头像生成,要多少有多少

还在为选一个个性十足&#xff0c;不同于别人的头像而烦恼吗&#xff1f;12,230,590,464个头像够你选择够不够&#xff1f;Multiavatar一款集多文化头像生成器&#xff0c;它可以根据不同的种族&#xff0c;不同的文化&#xff0c;不同的年龄&#xff0c;不同的世界观&#xff…

将Java 8流解析为SQL

当Java 8发行并且人们开始流式处理各种东西时&#xff0c;很快他们就开始想象如果可以以相同的方式使用数据库将有多大的潜力。 本质上&#xff0c;关系数据库由以表状结构组织的巨大数据块组成。 这些结构非常适合进行过滤和映射操作&#xff0c;如SQL语言的SELECT&#xff0c…

TCP Congestion Control

TCP Congestion Control Congestion occurs when total arrival rate from all packet flows exceeds R over a sustained(维持) period of timeBuffers(缓冲) at multiplexer will fill and packets will be lostPhases of Congestion Behavior Light traffic Arrival Rate &l…

SVG格式的Icon,用了你就知道有多香

继阿里的iconfont之后&#xff0c;字节跳动也出品了自己的矢量图标库&#xff0c;可以实现根据单一SVG源文件变换出多种主题&#xff0c; 具备丰富的分类、更轻量的代码和更灵活的使用场景。矢量SVG图标的出现&#xff0c;完全改变了前端的开发方式&#xff0c;之前总是通过设计…

sql server2016里面的json功能 - 转

测试一下基本的&#xff0c;从查询结果里面构造一个json 的格式 create table t1(ID int identity,name nvarchar(50),Chinese int ,Math int)insert into t1 values (张三,90,80),(李四,75,90),(王五,68,100) select * from t1select * from t1 for json auto--查询结果 ID …

CSS实现TikTok文字抖动效果

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤&#xff0c;设计希望用代码实现&#xff0c;前端要设计出gif图&#xff0c;最后谁也不让谁&#xff0c;设计走了&#xff0c;留下了前端独自加班......CSS技术是前端必须掌握的一项技能&#xff0c;不仅要掌握&#…

当心findFirst()和findAny()

过滤Java 8 Stream &#xff0c;通常使用findFirst()或findAny()来获取在过滤器中幸存的元素。 但这可能并不能真正实现您的意思&#xff0c;并且可能会出现一些细微的错误。 那么 从我们的Javadoc&#xff08; 此处和此处 &#xff09;可以看出&#xff0c;这两个方法都从流中…

Intellij新建Spring项目引入用户目录下的Spring jar包

首先&#xff0c;在IntelliJ IDEA中新建module&#xff0c;选择Spring应用&#xff1a; 在初次使用时&#xff0c;如果IDE检测到本地没有spring核心库&#xff0c;则会在新建过程中下载对应库文件&#xff0c;在使用spring框架时&#xff0c;可以细分多种不同应用场景&#xff…

如何在typescript中使用axios来封装一个HttpClient类

我们通常开始直接在代码中使用像axios这样的第三方库。这没有错。但是&#xff0c;在不断变化的库&#xff0c;软件包&#xff0c;版本等世界中&#xff0c;直接使用这些库API可能会导致代码不一致。一个好的做法是创建自己的抽象并将对库API的调用包装到包装器中。这将使您保持…

gRPC Web使用指南

gRPC 是一个高性能、通用的开源 RPC 框架&#xff0c;其由 Google 主要面向移动应用开发并基于 HTTP/2 协议标准而设计&#xff0c;基于 ProtoBuf (Protocol Buffers) 序列化协议开发&#xff0c;且支持众多开发语言&#xff08;&#xff09;。gRPC 提供了一种简单的方法来精确…

C# 发送email邮件!

利用C#邮件发送邮箱使用到两个类SmtpClient和MailMessage。可以把SmtpClient看做发送邮件信息的客户端&#xff0c;而把MailMessage看做需要发送的消息。 下面是我写的发送邮件的公共方法&#xff1a; 1 /// <summary>2 /// 3 /// </summary>4 …

JUnit 5 –扩展模型

我们已经对Java最普遍的测试框架的下一个版本了解很多。 现在让我们看一下JUnit 5扩展模型&#xff0c;该模型将允许库和框架将自己的实现添加到JUnit中。 总览 设定 基本 建筑 扩展模型 条件 注射 … 在新兴的《 JUnit 5用户指南》中可以找到您将在此处阅读的更多内容…

软件工程实验5

SA17225400 哪来的妖精 《软件工程&#xff08;C编码实践篇&#xff09;》MOOC课程作业http://mooc.study.163.com/course/USTC-1000002006 GitHub &#xff1a;https://github.com/littlewulei/Software-Engineering-Lab.git 实验要求&#xff08;参照视频中的具体实验过程&…

纯CSS实现水波纹效果

首先我们从结构和样式两个方面来讲解以上动图的实现过程&#xff1a;Html结构&#xff1a;<div class"square"><span></span><span></span><span></span><div class"content"><h2>Post Title</h…

乡村医生需要什么,看这张图就够了!

乡村医生需要什么&#xff0c;看这张图就够了&#xff01; 笔者最近在重庆市人民政府公开信箱中看到了一位赤脚医生写给政府的公开信&#xff0c;因读后无比感动&#xff0c;索性就摘录了出来&#xff1a; 来信内容&#xff1a; 我们是70-80年代的赤脚医生&#xff0c;是计划生…

Handsfree.js — 一个通过计算机视觉集成手势,面部表情和各种姿势识别的前端库

当电视上出现上图这种科技大片的时候&#xff0c;有没有幻想过有一天可以实现上图的这种交互&#xff0c;当我打开Handsfree这个库的介绍页时&#xff0c;看到前端页面竟然能够识别人的手势&#xff0c;面部以及各种肢体动作&#xff0c;简直刷新了我对前端能力的认知。确信这种…