Vuex給state中的對象新添加屬性遇到問題如何解決

這篇文章主要介紹“Vuex給state中的對象新添加屬性遇到問題如何解決”，在日常操作中，相信很多人在Vuex給state中的對象新添加屬性遇到問題如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vuex給state中的對象新添加屬性遇到問題如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Vuex給state中的對象新添加屬性遇到的坑

state.js中有一個空對象obj：

export default {
  ...
  obj: {}
}

在App.vue中點擊“給空對象增加屬性”按鈕，觸發事件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 同樣是響應式的，且觸發視圖更新。它必須用于向響應式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如 this.myObject.newProperty = 'hi')
    console.log(name);
    Vue.set(state.obj, 'name', name);
  }
}

頁面效果：

向vuex對象中增加新的屬性需要注意

今天開發一個項目，需求會去刪除和新增vuex中的state值，但是用obj.prop這種方法給state中的obj添加不了prop

我想要添加一個屬性值為provinceSoicalImg，從打印的對象中看到時存在這個屬性的，但是

他沒有get和set屬性，導致我把這個data復制給

我的vuex的時候，這個屬性就消失了

后來仔細想了下，之前遇到過vue修改data是對象的視圖，如果直接修改是不行的，然后又百度了下為什么沒有get和set方法，

稍加理解我猜測，vue的雙向綁定基于的是object.defineProperty數據劫持，會把屬性轉換為getter/setter，vuex也是基于雙向綁定的，所以普通的點或者中括號去新增一個屬性是不行的，需要用到vue的set的方法

到此，關于“Vuex給state中的對象新添加屬性遇到問題如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！