详解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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JS定时关闭窗口的实例
May 22 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
python比较2个xml内容的方法
2015/05/11 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
贯彻学习两会心得体会范文
2014/03/17 职场文书
教师节宣传方案
2014/05/23 职场文书
综治工作心得体会
2014/09/11 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
员工辞退通知书
2015/04/17 职场文书
mysql如何查询连续记录
2022/05/11 MySQL