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 相关文章推荐
基于JQuery制作的产品广告效果
Dec 08 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
用javascript实现倒计时效果
Feb 09 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python可以实现栈的结构吗
2020/05/27 Python
python解包概念及实例
2021/02/17 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
仓库班组长岗位职责
2013/12/12 职场文书
自我鉴定书面格式
2014/01/13 职场文书
四风存在的原因分析
2014/02/11 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python