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調(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)式對象中添加一個 property，并確保這個新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如 this.myObject.newProperty = 'hi')
? ? console.log(name);
? ? Vue.set(state.obj, 'name', name);
? }
}

頁面效果：