前言

首先，因為我有一個需求就是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中的數組變化監聽實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。

時間： 2019-11-06

總結

以上是生活随笔為你收集整理的vue 监听map数组变化_vuex state中的数组变化监听实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。