javascript - Vue.js:如何更新 "list"计算属性中的单个项目？

Question

我正在尝试确定解决以下问题的最佳模式:

• 我想显示特定部门的人员列表
• 我将部门索引设为常规的响应式(Reactive) Vue 属性
• 我将部门人员列表设为计算属性

现在:

• 我的后端(Mac 应用)可以调度“索引处的人员已更改”事件，并且我必须重新加载单个人员的姓名。
• 但是:person 属性是计算属性中的一项(即“people”，请参阅下面的代码)。

如何更新人员列表中人员的姓名，而人员列表又是一个计算属性(尽管它是从 departmentIndex + 后端调用“计算”​​出来的)？

我认为我原来的设置有错误。也许人员列表一开始就不应该是计算属性？

这是代码:

function pretendUpdateEventFromBackend() {
   var event = new CustomEvent('PersonUpdated', {detail:{index:1, name:'Jimmy'}});

  document.dispatchEvent(event);
}

var backend = {
  // The actual backend is a Mac app with an embedded WebView...
  listPeopleInDepartment(departmentIndex) {
    return [
      {name:'John'},
      {name:'James'},
      {name:'Jane'}
    ];
  }
}

var app = new Vue({
  el: '#app',

  data: {
      message:'',
      departmentIndex:0,
  },

   computed: {

    people() {
      return backend.listPeopleInDepartment(this.departmentIndex);
    }
  },

  created() {
    const me = this;
    document.addEventListener('PersonUpdated', function(e){

      me.message += 'Updated ';

      var personIndex = e.detail.index;
      var newName = e.detail.name;

      // How can I update person in the list of computed people here?
      // Or how can I force a reload of the people list?

      me.message += 'Person at: ' + personIndex + ' new name: ' + newName + "\n";  
    });
  },
});

HTML:

      <button onclick="pretendUpdateEventFromBackend()">Trigger Update Event from Backend</button>

      <div id="app">

        <div class="person" v-for="person in people">
          Name: {{ person.name }}
        </div>

        <pre>{{message}}</pre>

      </div>

编辑:

在 jsbin 上试试:http://jsbin.com/guwezoyena/1/edit?html,js,output

Answer 1

我只是想我应该给你一些关于你的设置的进一步见解:

如果 listPeopleInDepartment 是实际代码中的 ajax 调用，则这可能是一个不好的模式。看，Vue 将识别计算属性中使用的每个属性(包括其他计算属性)，并确保在其中任何一个发生更改时重新计算它。就您而言，这意味着每当 departmentIndex 更改时，它都会重新计算 people。

这就是为什么它可能有问题，因为您必须返回ajax请求的结果，它不能是异步的，因此它将是一个阻塞调用，会导致页面无响应运行。另外，假设您正在查看部门 1，然后更改为 2，如果您返回到 1，则必须重新加载部门 1 中的人员，因为它没有存储在任何地方。

您可能应该实现一些缓存策略，并仅在数据尚不可用时才进行 ajax 加载，同样以非阻塞方式。您可以使用一个数组来实现此目的，该数组存储按部门 id 索引的 peopleInDepartment 数组，以及一个用于执行以下操作的 departmentIndex 观察程序:

function (newValue){
    if (!this.peopleCache[newValue]){
        var that = this;
        //Load it via ajax
        loadPeopleInDepartment(newValue, function(result){
            that.peopleCache[newValue] = result;
        });
    }
}