vue 监听map数组变化_vuex state中的数组变化监听实例

本文介绍了在Vue组件中如何监听Vuex state中的数组变化。当尝试直接监听数组变化时,watch无法生效。通过在Vuex store中添加getter,并在组件中使用mapGetters映射getter,然后在watch中监听getter方法,成功实现了数组变化的监听。
摘要由CSDN通过智能技术生成

前言

首先,因为我有一个需求就是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 { ma

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值