快捷導(dǎo)航

Vuex給state中的對(duì)象新添加屬性遇到的問(wèn)題及解決

更新時(shí)間：2023年01月10日 17:11:40 作者：每一天，每一步

這篇文章主要介紹了Vuex給state中的對(duì)象新添加屬性遇到的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vuex給state中的對(duì)象新添加屬性遇到的坑

state.js中有一個(gè)空對(duì)象obj：

export default {
? ...
? obj: {}
}

在App.vue中點(diǎn)擊“給空對(duì)象增加屬性”按鈕，觸發(fā)事件addObjAttr：

<template>
? <div id="app">
? ? ...
? ? <button @click="addObjAttr">給空對(duì)象增加屬性</button>
? </div>
</template>

<script>
export default {
? name: 'App',
? ...
? methods: {
? ? ...
? ? addObjAttr() {
? ? ? this.$store.dispatch('addObjAttr', {name: 'zs'});
? ? }
? }
}
</script>

<style>
#app {
? font-family: Avenir, Helvetica, Arial, sans-serif;
? -webkit-font-smoothing: antialiased;
? -moz-osx-font-smoothing: grayscale;
? text-align: center;
? color: #2c3e50;
? margin-top: 60px;
}
</style>

this.$store.dispatch調(diào)度actions中的addObjAttr方法，并通過(guò)commit提交到mutations中的方法addObjAttr：

actions.js：

export default {
? ...
?
? addObjAttr({ commit }, payload) {
? ? commit('addObjAttr', payload.name);
? }
}

mutations.js 通過(guò)Vue.set響應(yīng)視圖：

import Vue from 'vue'
export default {
? ...
? addObjAttr(state, name) {
? ? // 視圖無(wú)法響應(yīng)
? ? // state.obj['name'] = name;
? ? // console.log(state.obj);
?
? ? // Vue.set向響應(yīng)式對(duì)象中添加一個(gè) property，并確保這個(gè)新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對(duì)象上添加新 property，因?yàn)?Vue 無(wú)法探測(cè)普通的新增 property (比如 this.myObject.newProperty = 'hi')
? ? console.log(name);
? ? Vue.set(state.obj, 'name', name);
? }
}

頁(yè)面效果：

向vuex對(duì)象中增加新的屬性需要注意

今天開(kāi)發(fā)一個(gè)項(xiàng)目，需求會(huì)去刪除和新增vuex中的state值，但是用obj.prop這種方法給state中的obj添加不了prop

我想要添加一個(gè)屬性值為provinceSoicalImg，從打印的對(duì)象中看到時(shí)存在這個(gè)屬性的，但是

他沒(méi)有g(shù)et和set屬性，導(dǎo)致我把這個(gè)data復(fù)制給

我的vuex的時(shí)候，這個(gè)屬性就消失了

后來(lái)仔細(xì)想了下，之前遇到過(guò)vue修改data是對(duì)象的視圖，如果直接修改是不行的，然后又百度了下為什么沒(méi)有g(shù)et和set方法，

稍加理解我猜測(cè)，vue的雙向綁定基于的是object.defineProperty數(shù)據(jù)劫持，會(huì)把屬性轉(zhuǎn)換為getter/setter，vuex也是基于雙向綁定的，所以普通的點(diǎn)或者中括號(hào)去新增一個(gè)屬性是不行的，需要用到vue的set的方法