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