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 相关文章推荐
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
vue实现文字加密功能
Sep 27 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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脚本的10个技巧(6)
2006/10/09 PHP
php二分法在IP地址查询中的应用
2008/08/12 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
javascript中 try catch用法
2015/08/16 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python实现矩阵转置的方法分析
2017/11/24 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
Python运行DLL文件的方法
2020/01/17 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python怎么判断素数
2020/07/01 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python里反向传播算法详解
2020/11/22 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
项目总经理岗位职责
2014/02/14 职场文书
双语教学实施方案
2014/03/23 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
护理自荐信
2019/05/14 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Pandas搭配lambda组合使用详解
2022/01/22 Python