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 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
深入理解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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
通过代码实例了解Python异常本质
2020/09/16 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
毕业生自荐书模版
2014/01/04 职场文书
2014年班主任工作总结
2014/11/08 职场文书
转让协议书
2015/01/27 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android