Vue组件间通信 Vuex的用法解析


Posted in Javascript onAugust 05, 2019

上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库)。

首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了。我是通过npm方式安装的:

npm install vuex --save

安装好之后需要再main.js里全局引入:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})

这样就完成了Vuex的安装。接下来就是Vuex的用法了:

Vuex有五个属性:State、Getter、Mutation、Action、Module。

1. State里放入的是仓库的数据,类似于js里的data:

import Vue from 'vue'
const modules = {
 state:{
 name: '小白'
 }
 namespaced: true
}
export default modules

把Vuex放入src下的store文件里,建一个新的组件modules,然后把他抛出来,被引入所需数据的组件:

<script>
import { mapState }from 'vuex'
export default {
 computed:{
 // name(){
 // return this.$store.state.name
 // }
 ...mapState(['name'])
 },
 mounted(){
 console.log(this.name)
 }
}
</script>

Vuex里的数据需要从计算属性(computed)里获取,我写了两种我常用的方法,都可以接收到数据,在mounted钩子里打印出的数据:

Vue组件间通信 Vuex的用法解析

这里只是举个例子教大家如何用,不建议大家向我这样去写,Vuex应该用于所有业务逻辑的数据。不涉及到业务逻辑的,建议大家用上一章的方法:Vue组件间通信。

2. Getters里放入State里数据的扩展数据,可以把它当作计算属性。比如State里有一个数组,就可以从Getters里获取到数组的长度,或是取到对象里面的属性,用法和计算属性类似:

import Vue from ‘vue'

const modules = {
 state:{
 list:[
  {id :1,content: '第一条'},
  {id :2,content: '第二条'}
 ]
 },
 getter:{
 listLength: (state)=>{return state.list.length}
 }, namespaced: true}export default modules;

我在state里存了一个数组,然后getters计算出state里数组的长度,接下来就是在组件里接收了:

<script>
import { mapGetters } from 'Vuex'
export default {
 compoted:{
 ...mapGetters(['listLength'])
 },
 mounted(){
 console.log(this.listLegth)
 }
}
</script>

打开控制台打印出2,就是list数组的长度。

3. Mutations是保存在仓库的方法,这个方法只能用来改变state里面的数据,而且想要改变state里的数据只能用mutations里的方法,并且它里面的方法只能是同步的:

import Vue from 'vue'

const modules = {
 state:{
 name: '小黑'
 },
 mutations:{
 changeName(state){
  state.name = '小白'
 }
 },
 namespaced: true
}
export default modules;

还是那个例子,下面是组件调用方法:

<html>
<div>
 {{ name }}
 <el-button @click="changeName">改变名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
 compoted:{
 ...mapState(['name'])
 },
 methods:{
 ...mapMutations(['changeName'])
 }
}
</script>

页面渲染后为:

Vue组件间通信 Vuex的用法解析

点击按钮之后为:

Vue组件间通信 Vuex的用法解析

组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变,只不过mutations方法只能同步的,涉及到接口的就不能在它里面写,怎么办的?往下看:

4. Actions和mutations一样都是Vuex里的方法,只不过他们有两个最大的不同:

(1) Actions里可以存放异步方法,而Mutations只能放同步的;

(2) Actions里不可以更改state里的数据,state里的数据只能在Mutations里更改。

Actions是什么方法?简单的说,它就是一个Promise方法,通过不同的状态执行不同的方法,执行方法可以是Actions里的方法,也可以是Mutations里的方法。

Actions我就不举例子了,因为大部分都用于axios请求接口,简单跟大家说说这个东西怎么使用:

import Vue from 'vue'
import request from '@/api/axios'

const modules = {
 state:{
 list:[]
 },
 actions:{
 getList({ commit }){
  // 调用接口方法
  request.getList()
  .then((response)=>{
  // commit用来分配mutations方法
  commit('getList',response)
  })
 }
 },
 mutations:{
 getList(state,response){
  state.list = response.data
 }
 }
}

简单利用actions异步方法分配给mutations方法,然后在mutations方法里给state里的数据赋值,取到接口数据。

commit用于分配mutations方法,dispatch用于分配actions方法,都需要传参进去。

组件调用其实和调用mutations方法类似:

<script>
import { mapState,mapActions } from 'vuex'
export default {
 computed:{
 ...mapState(['list'])
 },
 mounted(){
 this.getList()
 },
 methods:{
 ...mapActions(['getList'])
 }
}
</script>

这样就基本完成了vuex传值。

5. module可以把vuex分为不同的模块,使业务逻辑变得更清晰,更准确。在上面的代码里,有const modules,给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法,使用起来非常方便。

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

Javascript 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 #Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 #Javascript
vue v-for 使用问题整理小结
Aug 04 #Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 #Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 #Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 #Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 #Javascript
You might like
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
Python虚拟环境项目实例
2017/11/20 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
军校本科大学生自我评价
2014/01/14 职场文书
初中化学教学反思
2014/01/23 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
第一节英语课开场白
2015/06/01 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
使用tensorflow 实现反向传播求导
2021/05/26 Python