vuex state中的数组变化监听实例
前言
首先,因为我有一个需求就是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会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图
-
Vuejs监听vuex中值的变化的方法示例
比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知. fruit-count-component.vue <template> <p>Fruits: {{ count }}</p> </template> <script> import basket from '../resources/fruit-basket' export default () { comput
-
vue之组件内监控$store中定义变量的变化详解
// 1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, // 2.通过watch来检查定义计算属性获取到的值的变化 watch:{ listenstage: function(ov,nv){ console.log('watch start--'); if(this.$store.state.iShaveMsg){ //业务处理 } } console.log('wa
-
vue 获取及修改store.js里的公共变量实例
html <input type='text' :value='num'> <button @click='add'> + </botton> js data(){ return{ } }, methods:{ add(){ this.$store.commit('add',1) } }, computed:{ num:function(){ // 因为要做修改 num 的值 所以放在 计算属性里 return this.$store.state.num } } sto
-
vuex state中的数组变化监听实例
前言 首先,因为我有一个需求就是vue组件中有一组多选框,选中多选框的内容,要在另一个组件中进行视图更新,这个就设计的兄弟组件之间的通信了,兄弟组件之前通信我首先选用的vuex这个解决办法. 问题 vuex的state用来放数据,我就把数组放在了vuex中,然后设置了修改的函数.最终store.js中的代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { messArray:[] } c
-
vue watch普通监听和深度监听实例详解(数组和对象)
下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console
-
vue深度监听(监听对象和数组的改变)与立即执行监听实例
1.vue中监听对象数据属性值的改变,可以使用深度监听 data () { return { form: { status: '', cpufrequency: '', systemstacksize: '', scalabilityclass: '' } } }, watch: { form: { // 深度监听 handler(val, oldVal){ console.log('currentForm',val, oldVal) // 但是这两个值打印出来却都是一样的,因为它们的引用指向同
-
php中Socket创建与监听实现方法
本文实例讲述了php中Socket创建与监听实现方法.分享给大家供大家参考.具体如下: 这里提供了在php中socket相关函数的一个实例,如创建Socket,接受一个socket连接 ,写入一个Socket及初始化连接等操作,具体实例代码如下: 复制代码 代码如下: $ip="127.0.0.1"; //定义ip地址 $port=1000; //定义端口 $socket=socket_create(af_inet,sock_stream,sol_
-
解决Vue2.0 watch对象属性变化监听不到的问题
问题 很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性.发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了. 解决 为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除. 请参照https://v1-cn.vuejs.org/guide/reactivity.html 解决方式: 通过vue的this.$set(object, key, value)方法 通过Object.assign()
-
Vue项目中数据的深度监听或对象属性的监听实例
众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.根据vue的文档,不难发现,使用数据的深度监听来达到这一效果.具体实现如下: watch: { evlist: { handler(val, oldVal) { this.isTeam = val.projectParty; this.pjtid = val.pjtid; this.isFinish =
-
vue select选择框数据变化监听方法
1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
关于js中removeEventListener取消事件监听的坑
从addEventListener说起,上代码 onMounted(() => { window.addEventListener("click", ()=>{ doSth(param)//param为参数 }) }) addEventListener有一个箭头函数回调函数,这个函数本身不能传参(当然event除外),如果你要传参,只能在doSth函数上传,我们也可以将箭头函数回调函数替换成一个函数,但是这个函数明显不能有参数 onMounted(() => { wi
-
ListView-添加item的事件监听实例
1. 点击事件(OnItemClickListener) onItemClick(AdapterView<?> parent, View view, int position, long id) parent:官方解释为:The AdapterView where the click happened,也就是用户所点击的AdapterView,这个参数一般不用. view:当前点击的列表项所对应的布局View对象,可通过这个参数获得相应的列表项内部的组件,进而对其进行操作.举个例子,假设有一个
-
Android网络状态实时监听实例代码(二)
上篇文章给大家介绍了Android 网络状态实时监听代码实例(一),感兴趣的朋友可以点击了解详情,本文接着给大家介绍android网络状态监听相关知识,具体内容如下所示: 在开发android应用时,涉及到要进行网络访问,时常需要进行网络状态的检查,以提供给用户必要的提醒.一般可以通过ConnectivityManager来完成该工作. ConnectivityManager有四个主要任务: 1.监听手机网络状态(包括GPRS,WIFI, UMTS等) 2.手机状态发生改变时,发送广播 3.当一
随机推荐
- ThinkPHP文件上传实例教程
- 使用Sqlserver事务发布实现数据同步(sql2008)
- Javascript 6里的4个新语法
- PHP获取当前页面完整URL的方法
- JavaScript基于扩展String实现替换字符串中index处字符的方法
- JavaScript使用Range调色及透明度实例
- JS暴虐查找法简洁版
- ASP.NET缓存 方法分析和实践示例
- 使用PyV8在Python爬虫中执行js代码
- Android网络编程之获取网络上的Json数据实例
- C#将字母或数字加密成字母的方法
- Android将应用调试log信息保存在SD卡的方法
- Android关于FTP文件上传和下载功能详解
- 怎么改善现有网站
- vbs 百度小助手
- Mysql数据库性能优化三(分表、增量备份、还原)
- IP连接SQL SERVER失败(配置为字符串失败)图文解决方法
- SQLServer存储过程中事务的使用方法
- js实现无缝滚动图(可控制当前滚动的方向)
- javascript 实现键盘上下左右功能的小例子