vuex state中的数组变化监听实例


Posted in Javascript onNovember 06, 2019

前言

首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法。

问题

vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数。最终store.js中的代码如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
 messArray:[]
}

const mutations = {
 modifyArray(state, obj){
 state.messArray=obj.messArray
 // Vue.$set(this,this.messArray,[...obj.messArray])
}

const actions={
 modifyArr(context,obj){
 context.commit('modifyArray',obj)
 },
}
export default new Vuex.Store({
 state,
 mutations,
 actions
})

然后在组建的data中,通过mapState映射过去:

//在使用事前必须引入这个
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

data() {
  return {
  ...mapState(["messArray"]),
  }
 }

然后在watch中设置了监听:

watch:{
  messArray: function(val){
  console.log("watch ChildA.vue "+val)
  }
}

这个时候问题就出来了,虽然数组修改了,但是watch就是监听不到。

解决办法

在我搜索了一些网上的办法之后,发现大部分我都用不来,最后只能巧妙的通过computed和getter解决了这个问题。

给刚才的store.js添加一个getter

const getters = {
 messArray_get:state=>state.messArray,
}

然后在要监听变化的组件中的computed中添加如下代码:

...mapGetters(['messArray_get']),

然后在watch中这样写

watch:{

  messArray_get : function(val){
   console.log("messArray_get "+val)
  }

 }

vuex state中的数组变化监听实例

vuex state中的数组变化监听实例

大功告成,就是如此简单巧妙。

以上这篇vuex state中的数组变化监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 #Javascript
webpack是如何实现模块化加载的方法
Nov 06 #Javascript
node读写Excel操作实例分析
Nov 06 #Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 #Javascript
electron 安装,调试,打包的具体使用
Nov 06 #Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 #Javascript
在vue中阻止浏览器后退的实例
Nov 06 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
js模糊查询实例分享
2016/12/26 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python读大数据txt
2016/03/28 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python request中文乱码问题解决方案
2020/09/17 Python
简述python&pytorch 随机种子的实现
2020/10/07 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
主持人演讲稿范文
2013/12/28 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
MySQL分区表实现按月份归类
2021/11/01 MySQL