Vuejs2 Vue.js 2：状态变量更改时的操作

我使用的是一个简单的状态管理器（不是vuex），如中所述。简而言之，它看起来是这样的：

export const stateholder = {
   state: {
      teams: [{id: 1, name:'Dallas Cowboys'}, {id: 2, name:'Chicago Bears'}, {id: 3, name:'Philadelphia Eagles'}, {id:4, name:'L.A. Rams'}],
      selectedTeam: 2,
      players: []
   }
   getPlayerList: async function() { 
      await axios.get(`http://www.someapi.com/api/teams/${selectedTeam}/players`) 
         .then((response) => {
            this.state.players = response.data;
         })
   }
}

我如何（反应性地，而不是通过HTML元素的onChange事件）确保

玩家

在每次

selectedTeam

更改时都得到更新（通过

getPlayerList

）

---

有没有比官方文件更进一步的简单状态的例子？谢谢。

您可以使用

v-on:change

或简称触发

getPlayerList

---

这里，使用

setTimeout

模拟请求

在内部，Vue使用

Object.defineProperty

将属性转换为getter/setter对，使其具有反应性。文件中提到了这一点：

将普通JavaScript对象作为其数据传递给Vue实例时 选项，Vue将遍历其所有属性并转换它们 使用Object.defineProperty创建getter/setter

您可以在此处的Vue源代码中看到这是如何设置的：

当

selectedTeam

更改时，您也可以执行相同的操作来触发

getPlayerList

：

function defineReactive(obj, key) {
  let val = obj[key]

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      return val;
    },
    set: function reactiveSetter(newVal) {
      val = newVal;
      stateholder.getPlayerList();
    }
  })
}

defineReactive(stateholder.state, 'selectedTeam');

或者可以使用内部属性隐式设置它：

const stateholder = {
  state: {
    teams: [/* ... */],
    _selectedTeam: 2,
    get selectedTeam() {
      return this._selectedTeam;
    },
    set selectedTeam(val) {
      this._selectedTeam = val;
      stateholder.getPlayerList();
    },
    players: []
  },
  getPlayerList: async function() {
    /* ... */
  },
};

---

您的问题也类似于，您可能会在那里找到更多信息。

感谢您的回复，但这不是一个“反应式”解决方案，因为它不会解决

selectedTeam

的值通过Javascript或其他用户操作发生更改时的问题，等等。可能根本没有任何用户可选择的元素。@ExactaBox我不明白。这是被动的，因为它会对

玩家的变化做出反应。你对“被动”的定义是什么？此外：如果您的代码能够更改
selectedTeam
，则可以触发
getPlayerList
。这是怎么回事？它只在
select
更改时触发，而
selectedTeam正好连接到
selectedTeam
。因此，如果
selectedTeam
通过其他方式进行更改，则不会发生任何事情。我不认为这是被动的（我可能是错的）原因是，
select
正在主动触发事件（通过
@change
），它不是框架对变量值/状态的更改做出“反应”。您可以按照文档中提到的做（Vue内部发生的事情）：将
selectedTeam
转换为在
set
上触发
getPlayerList
的getter/setter。您也可以研究使用代理。@chipit24谢谢，我浏览了大部分文档，但一定错过了这个模式。getter/setter在
set
上的操作非常有效。如果你用这个回答，我会记下来的。