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 继承详解(一)
Jul 13 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
深入理解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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php生成随机数的三种方法
2014/09/10 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
jquery 简单应用示例总结
2013/08/09 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python中的super()方法使用简介
2015/08/14 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python实现字符串和字典的转换
2018/09/29 Python
五种Python转义表示法
2020/11/27 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
python re模块和正则表达式
2021/03/24 Python
学生生病请假条范文
2014/02/16 职场文书
法学专业求职信
2014/07/15 职场文书
内科护士节演讲稿
2014/09/11 职场文书
大学生就业意向书
2015/05/11 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
MySQL查询学习之基础查询操作
2021/05/08 MySQL
对象析构函数__del__在Python中何时使用
2022/03/22 Python