Question

我有一个用于保存和管理数据的ES6类：

import DataManager from "./components/data-manager.js";
export default {
  ...
  data() {
    return {
      dataModel: null
    }
  },
  beforeMount() {
    this.dataModel = new DataManager();
  },
  computed: {
    datas() {
      return this.dataModel.myProperty
    }
  },
  ...
}

但似乎存在反应性问题，并且对dataModel所做的任何更改都不会触发重新呈现视图。如何让我的班级属性反应？

谢谢，

编辑： @acdcjunior这个类看起来像这样，但我意识到发生了一些突变......这会是问题吗？无论如何，如果这不是一个好的做法，使整个ES6 +类反应，我会得到它，并去一个普通的对象，甚至Vuex商店。有什么简单的建议吗？

class DataManager {
  constructor() {
    this.professionalsList = [];
    this.eventsList = [];
    this.attendeesList = [];    
  }

  // import datas
  importDatas({
    professionalsList,
    eventsList,
    attendeesList
  }) {
    this.professionalsList = this.parsePros(professionalsList)
    ... 
  }
  parsePros(list) {
    return list.map( item => { ... })
  }
  ...
}

编辑＃2：所以问题确实是我试图绑定的一个对象中发生的一些突变。

Answer 1

您需要将相同的数据结构存储在从DataManager（）返回的data（）。dataModel中，并更改方法中的每个属性。在数据对象中设置新的动态属性时，它们不能被动。你可以尝试Vue.set（），但这是一个不好的做法。

Vue使ES6类对象具有反应性

1 个答案: