Vue 与 Vuex 的第一次接触遇到的坑


Posted in Javascript onAugust 16, 2018

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

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

一、安装并引入 Vuex

项目结构:

Vue 与 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 与 Vuex 的第一次接触遇到的坑

四、在组件中修改状态

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

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

Vue 与 Vuex 的第一次接触遇到的坑

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

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

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

Vue 与 Vuex 的第一次接触遇到的坑

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

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

Vue 与 Vuex 的第一次接触遇到的坑

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

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

Vue 与 Vuex 的第一次接触遇到的坑

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

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

总结

以上所述是小编给大家介绍的Vue 与 Vuex 的第一次接触遇到的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
You might like
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python字典get()方法用法分析
2015/04/17 Python
Python 性能优化技巧总结
2016/11/01 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
年终奖发放方案
2014/06/02 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
生物学专业求职信
2014/07/23 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js
Redis 限流器
2022/05/15 Redis
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python