详解Vue爬坑之vuex初识


Posted in Javascript onJune 14, 2017

在 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,可以让我们更好的跟踪每一个状态的变化,所以在大型项目中,更推荐使用第二种方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
vue时间格式化实例代码
Jun 13 #Javascript
详解vue slot插槽的使用方法
Jun 13 #Javascript
详解Vue.js分发之作用域槽
Jun 13 #Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 #Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 #Javascript
You might like
重置版游戏视频
2020/04/09 魔兽争霸
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP7 list() 函数修改
2021/03/09 PHP
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
js变量提升深入理解
2016/09/16 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python自带的http模块详解
2016/11/06 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python 处理string到hex脚本的方法
2018/10/26 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python列表推导式入门学习解析
2019/12/02 Python
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
实习护理工作自我评价
2013/09/25 职场文书
优秀经理事迹材料
2014/02/01 职场文书
大学毕业自我评价
2014/02/02 职场文书
仓管员岗位责任制
2014/02/19 职场文书
语文教研活动总结
2014/07/02 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
公司奖励通知
2015/04/21 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书