Vuex給state中的對(duì)象新添加屬性遇到的問題及解決
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方法，并通過commit提交到mutations中的方法addObjAttr：
actions.js：
export default {
? ...
?
? addObjAttr({ commit }, payload) {
? ? commit('addObjAttr', payload.name);
? }
}mutations.js 通過Vue.set響應(yīng)視圖：
import Vue from 'vue'
export default {
? ...
? addObjAttr(state, name) {
? ? // 視圖無法響應(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 無法探測(cè)普通的新增 property (比如 this.myObject.newProperty = 'hi')
? ? console.log(name);
? ? Vue.set(state.obj, 'name', name);
? }
}頁(yè)面效果：
向vuex對(duì)象中增加新的屬性需要注意
今天開發(fā)一個(gè)項(xiàng)目，需求會(huì)去刪除和新增vuex中的state值，但是用obj.prop這種方法給state中的obj添加不了prop
我想要添加一個(gè)屬性值為provinceSoicalImg，從打印的對(duì)象中看到時(shí)存在這個(gè)屬性的，但是
他沒有g(shù)et和set屬性，導(dǎo)致我把這個(gè)data復(fù)制給
我的vuex的時(shí)候，這個(gè)屬性就消失了
后來仔細(xì)想了下，之前遇到過vue修改data是對(duì)象的視圖，如果直接修改是不行的，然后又百度了下為什么沒有g(shù)et和set方法，
稍加理解我猜測(cè)，vue的雙向綁定基于的是object.defineProperty數(shù)據(jù)劫持，會(huì)把屬性轉(zhuǎn)換為getter/setter，vuex也是基于雙向綁定的，所以普通的點(diǎn)或者中括號(hào)去新增一個(gè)屬性是不行的，需要用到vue的set的方法
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能示例
這篇文章主要介紹了vue.js使用v-model指令實(shí)現(xiàn)的數(shù)據(jù)雙向綁定功能,簡(jiǎn)單分析了v-model指令的功能并結(jié)合實(shí)例形式給出了v-model指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動(dòng)態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue中@change兼容問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue-print-nb解決vue打印問題,并且隱藏頁(yè)眉頁(yè)腳方式
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁(yè)眉頁(yè)腳方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)VUE響應(yīng)式屬性裝飾器詳析，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
在vue中高德地圖引入和軌跡的繪制的實(shí)現(xiàn)
這篇文章主要介紹了在vue中高德地圖引入和軌跡的繪制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法
這篇文章主要給大家介紹了關(guān)于vue3路由跳轉(zhuǎn)params傳參接收不到的解決辦法,Vue3是目前前端開發(fā)中非常流行的框架之一,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景詳析
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景的相關(guān)資料,插槽（Slot）是Vue提出來的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下2021-06-06
Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式
這篇文章主要介紹了Vue3哈希模式實(shí)現(xiàn)錨點(diǎn)導(dǎo)航方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
elementui實(shí)現(xiàn)標(biāo)簽頁(yè)與菜單欄聯(lián)動(dòng)的示例代碼
多級(jí)聯(lián)動(dòng)是一種常見的交互方式,本文主要介紹了elementui實(shí)現(xiàn)標(biāo)簽頁(yè)與菜單欄聯(lián)動(dòng)的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06