vuex state中的數(shù)組變化監(jiān)聽實(shí)例
前言
首先，因?yàn)槲矣幸粋€(gè)需求就是vue組件中有一組多選框，選中多選框的內(nèi)容，要在另一個(gè)組件中進(jìn)行視圖更新，這個(gè)就設(shè)計(jì)的兄弟組件之間的通信了，兄弟組件之前通信我首先選用的vuex這個(gè)解決辦法。
問題
vuex的state用來放數(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中，通過mapState映射過去：
//在使用事前必須引入這個(gè)
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
data() {
return {
...mapState(["messArray"]),
}
}
然后在watch中設(shè)置了監(jiān)聽：
watch:{
messArray: function(val){
console.log("watch ChildA.vue "+val)
}
}
這個(gè)時(shí)候問題就出來了，雖然數(shù)組修改了，但是watch就是監(jiān)聽不到。
解決辦法
在我搜索了一些網(wǎng)上的辦法之后，發(fā)現(xiàn)大部分我都用不來，最后只能巧妙的通過computed和getter解決了這個(gè)問題。
給剛才的store.js添加一個(gè)getter
const getters = {
messArray_get:state=>state.messArray,
}
然后在要監(jiān)聽變化的組件中的computed中添加如下代碼：
...mapGetters(['messArray_get']),
然后在watch中這樣寫
watch:{
messArray_get : function(val){
console.log("messArray_get "+val)
}
}
大功告成，就是如此簡單巧妙。
以上這篇vuex state中的數(shù)組變化監(jiān)聽實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇內(nèi)容里小編給大家講的是關(guān)于vue組件命名和props命名的相關(guān)知識點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-09-09
el-upload多選文件上傳報(bào)錯(cuò)解決方案
本文主要介紹了el-upload多選文件上傳報(bào)錯(cuò)解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要介紹了vue如何自定義組件v-model問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件，具體內(nèi)容詳情大家參考下本文2018-04-04
vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼
這篇文章主要介紹了vue2?element?實(shí)現(xiàn)表格點(diǎn)擊詳情返回時(shí)保留查詢參數(shù)的示例代碼,本文通過圖文示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要給大家介紹了關(guān)于vuex刷新后數(shù)據(jù)丟失的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
本文主要介紹了vue中的可拖拽寬度div的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue.js?rules校驗(yàn)規(guī)則舉例詳解
Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
利用Vue3和Plotly.js創(chuàng)建交互式表格
在數(shù)據(jù)分析和可視化領(lǐng)域,經(jīng)常需要以表格的形式展示數(shù)據(jù),Plotly.js 是一款功能強(qiáng)大的 JavaScript 庫,不僅可以創(chuàng)建交互式圖表,還可以動(dòng)態(tài)生成 HTML 表格,本文給大家介紹了如何用Vue3和Plotly.js創(chuàng)建交互式表格,需要的朋友可以參考下2024-07-07
Element-ui設(shè)置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實(shí)現(xiàn)el-table實(shí)現(xiàn)跨表格禁用選項(xiàng),需要的朋友可以參考下2023-07-07