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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
jquery validate.js表单验证的基本用法入门
May 13 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 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
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP静态成员变量
2017/02/14 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
详解package.json版本号规则
2019/08/01 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
javascript实现多边形碰撞检测
2020/10/24 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python 文件读写操作实例详解
2014/03/12 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Python 可视化神器Plotly详解
2020/12/26 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
端午节活动策划方案
2014/03/09 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
特教教师先进事迹
2014/05/21 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
大学迎新生标语
2014/10/06 职场文书
四年级小学生评语
2014/12/26 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年手术室工作总结
2015/05/11 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
goland 设置project gopath的操作
2021/05/06 Golang