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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
详解vue中axios的使用与封装
Mar 20 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
php set_time_limit()函数的使用详解
2013/06/05 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
Python Pandas 箱线图的实现
2019/07/23 Python
python3多线程知识点总结
2019/09/26 Python
如何编写python的daemon程序
2021/01/07 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
会计稽核岗位职责
2015/04/13 职场文书
郭明义电影观后感
2015/06/08 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python