Vuex给state中的对象新添加属性遇到问题如何解决

发布时间：2023-01-11 09:33:27 阅读：108 作者：iii 栏目：开发技术

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍“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);
  }
}