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脚本
Dec 03 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
Vue异步加载about组件
Oct 31 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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
使用adodb lite解决问题
2006/12/31 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python 硬币兑换问题
2019/07/29 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
质检的岗位职责
2013/11/17 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
2014中考励志标语
2014/06/05 职场文书
关于安全的标语
2014/06/10 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
教师党员自我评价2015
2015/03/04 职场文书
整改通知书
2015/04/20 职场文书
2016党校学习心得体会
2016/01/07 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
总结几个非常实用的Python库
2021/06/26 Python
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
python内置模块之上下文管理contextlib
2022/06/14 Python