vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例
前言
首先，因?yàn)槲矣幸粋€(gè)需求就是vue組件中有一組多選框，選中多選框的內(nèi)容，要在另一個(gè)組件中進(jìn)行視圖更新，這個(gè)就設(shè)計(jì)的兄弟組件之間的通信了，兄弟組件之前通信我首先選用的vuex這個(gè)解決辦法。
問(wèn)題
vuex的state用來(lái)放數(shù)據(jù)，我就把數(shù)組放在了vuex中,然后設(shè)置了修改的函數(shù)。最終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中，通過(guò)mapState映射過(guò)去：
//在使用事前必須引入這個(gè)
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
data() {
return {
...mapState(["messArray"]),
}
}
然后在watch中設(shè)置了監(jiān)聽(tīng)：
watch:{
messArray: function(val){
console.log("watch ChildA.vue "+val)
}
}
這個(gè)時(shí)候問(wèn)題就出來(lái)了，雖然數(shù)組修改了，但是watch就是監(jiān)聽(tīng)不到。
解決辦法
在我搜索了一些網(wǎng)上的辦法之后，發(fā)現(xiàn)大部分我都用不來(lái)，最后只能巧妙的通過(guò)computed和getter解決了這個(gè)問(wèn)題。
給剛才的store.js添加一個(gè)getter
const getters = {
messArray_get:state=>state.messArray,
}
然后在要監(jiān)聽(tīng)變化的組件中的computed中添加如下代碼：
...mapGetters(['messArray_get']),
然后在watch中這樣寫(xiě)
watch:{
messArray_get : function(val){
console.log("messArray_get "+val)
}
}
大功告成，就是如此簡(jiǎn)單巧妙。
以上這篇vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐
這篇文章主要介紹了淺談vue后臺(tái)管理系統(tǒng)權(quán)限控制思考與實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例
這篇文章主要介紹了通過(guò)npm或yarn自動(dòng)生成vue組件的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問(wèn)
這篇文章主要介紹了vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問(wèn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。首先需要知道：axios不是一種新的技術(shù)。axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對(duì)原生XHR的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范2022-09-09
v-model用于表單數(shù)據(jù)的雙向綁定，其實(shí)它就是一個(gè)語(yǔ)法糖。這篇文章主要介紹了vue中v-model的應(yīng)用,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)周日歷切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了el-table嵌套el-popover處理卡頓的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制的操作方法
這篇文章主要介紹了vue directive全局自定義指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限控制,本文結(jié)合實(shí)例代碼對(duì)基本概念做了詳細(xì)講解，需要的朋友可以參考下2023-02-02
由于在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,也就是用圖表展示,眾所周知echarts是非常強(qiáng)大的插件,所以這篇文章主要給大家介紹了關(guān)于vue+echarts圖表使用的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04