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验证表单大全
Nov 25 Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
如何实现动态删除javascript函数
May 27 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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程序--记数器
2006/10/09 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
MySQL数据源表结构图示
2008/06/05 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
政风行风建设整改方案
2014/10/27 职场文书
企业法人任命书
2015/09/21 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL