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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
基于php无限分类的深入理解
2013/06/02 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python url 参数修改方法
2018/12/26 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python自动发微信监控报警
2019/09/06 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
饲料采购员岗位职责
2013/12/19 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
公司募捐倡议书
2014/05/14 职场文书
工程索赔意向书
2014/08/30 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
民事答辩状格式范文
2015/05/21 职场文书
诚信教育主题班会
2015/08/13 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers