Vue.js 2: действие при изменении переменной состояния

Question

Я использую простой менеджер состояний (НЕ 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;
         })
   }
}

Как я могу (реактивно, не через событие onChange элемента HTML) гарантировать, что players будет обновляться (через getPlayerList) каждый раз, когда selectedTeamизменения?

Какие-нибудь примеры простого состояния, которое идет немного дальше, чем официальные документы?Спасибо.

Answer 1

Внутренне Vue использует Object.defineProperty для преобразования свойств в пары геттер / установщик, чтобы сделать их реактивными.Это упоминается в документации по https://vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked:

Когда вы передаете простой объект JavaScript в экземпляр Vue в качестве параметра данных, Vue просматривает все его свойства и конвертирует их в метод получения / установкиusing Object.defineProperty.

Вы можете увидеть, как это настроено в исходном коде Vue, здесь: https://github.com/vuejs/vue/blob/79cabadeace0e01fb63aa9f220f41193c0ca93af/src/core/observer/index.js#L134.

Вы можете сделать то же самое, чтобы вызвать getPlayerList, когда selectedTeam изменения:

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() {
    /* ... */
  },
};

Ваш вопрос также похож на Вызов функции, когда свойство получаетустановить на объект , и вы можете найти там больше информации.

Answer 2

Вы можете использовать v-on:change или @ change для краткости для запуска getPlayerList.

Здесь скрипка , имитирующая запрос с помощью setTimeout.