详解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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 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
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
python实现巡检系统(solaris)示例
2014/04/02 Python
Python书单 不将就
2017/07/11 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
解释下面关于J2EE的名词
2013/11/15 面试题
行政部总经理岗位职责
2014/01/04 职场文书
高三英语教学反思
2014/01/13 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
微电影大赛策划方案
2014/06/05 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
校车安全责任书
2014/08/25 职场文书
户籍证明模板
2014/09/28 职场文书
代办社保委托书范文
2014/10/06 职场文书
表扬信范文
2015/05/04 职场文书
2015国庆节感想
2015/08/04 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL