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 相关文章推荐
js一组验证函数
Dec 20 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
javascript填充默认头像方法
Feb 22 Javascript
JavaScript中import用法总结
Jan 20 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
如何让vue长列表快速加载
Mar 29 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语法(3)
2006/10/09 PHP
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
Laravel5中contracts详解
2015/03/02 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
Python程序设计入门(3)数组的使用
2014/06/16 Python
理解python正则表达式
2016/01/15 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python几种常见算法汇总
2020/06/02 Python
python中常见错误及解决方法
2020/06/21 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
质检部岗位职责
2013/11/11 职场文书
工作疏忽检讨书
2014/01/25 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android