鍍金池/ 問(wèn)答/HTML/ vuex在actions 中調(diào)用 mutations 報(bào)錯(cuò)

vuex在actions 中調(diào)用 mutations 報(bào)錯(cuò)

在actions中調(diào)用

 commit('mapSet',map1);

mutations中是

mapSet:(state,mymap)=>{
            state.mymap=mymap;
        },
        
   

其中map1是一個(gè)對(duì)象,即傳入的參數(shù)是一個(gè)對(duì)象,調(diào)用的時(shí)候就會(huì)出現(xiàn)報(bào)錯(cuò)為

clipboard.png

mapSet是在actions中的一個(gè)方法中調(diào)用的

 makeMymap:({ dispatch, commit,state })=>{
                var map1=new state.qq.maps.Map('mapArea');
                commit('mapSet',map1); 
        }

我加入了一個(gè)plugins,內(nèi)容是

export default function myPlugin(store){
    //生成state快照
     let prevState=deepCopy(store.state)
    store.subscribe((mutation,state)=>{
        let nextState=deepCopy(state)
        console.log("prevState:"+prevState)
        console.log("nextState:"+nextState)
         prevState = nextState
    })
    //深拷貝
function deepCopy(o) {
    if (o instanceof Array) {
        var n = [];
        for (var i = 0; i < o.length; ++i) {
            n[i] = deepCopy(o[i]);
        }
        return n;
    } else if (o instanceof Function) {
        var n = new Function("return " + o.toString())();
        return n
    } else if (o instanceof Object) {
        var n = {}
        for (var i in o) {
            n[i] = deepCopy(o[i]);
        }
        return n;
    } else {
        return o;
    }
}
}

這樣執(zhí)行后出現(xiàn)了下面這些問(wèn)題

clipboard.png

clipboard.png

clipboard.png

clipboard.png

請(qǐng)問(wèn)這樣是因?yàn)槭裁茨??如何正確賦值呢?

回答
編輯回答
耍太極

你可以將使用mapSet的地方貼出來(lái)。
原因應(yīng)該是該數(shù)據(jù)不僅在VueX中被watch,還在其它地方被watch了,引發(fā)循環(huán)問(wèn)題。
在設(shè)置以及取出VueX的數(shù)據(jù)時(shí),都可以將數(shù)據(jù)深度拷貝一份,即是說(shuō)去掉Vue附加的get/set監(jiān)聽(tīng)。

2017年3月21日 12:43