Получить данные из Vuex Store с помощью Axios - PullRequest
Новая
       33

Получить данные из Vuex Store с помощью Axios

1 голос
/ 23 января 2020

Я искал возможные ответы на мой вопрос, но больше не мог найти предложений.

Структура моего проекта следующая. У меня есть PoolMainPage, где я показываю некоторую информацию об объекте activePool. Внутри PoolMainPage есть опции для направления на подстраницы (TeamSelector и PoolStandings), которые также требуют информацию об объекте activePool.

Объект activePool извлекается из конечной точки в хранилище Vuex. Код для этого следующий: 

const actions = {  
  getActivePool({ commit }) {
    const config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      withCredentials: true
    }
    const activePoolId = localStorage.getItem('activePoolId')
    if (activePoolId) {
      return axios.get('/pools/pool-information?poolId=' + activePoolId, config)
        .then((response) => {
          commit('SET_ACTIVE_POOL', response.data)
          return response
        })
        .catch((error) => {
          return Promise.reject(error)
        })
    } else {
      commit('SET_ACTIVE_POOL', null);
      return;
    }
  }
}

Конечная точка выполняет свою работу и возвращает объект activePool. В моем компоненте PoolMainPage (а также в его подкомпонентах) я хочу вызвать это действие и извлечь объект, используя: 

created() {
    if (!this.$store.getters.activePool) {
      this.$store.dispatch("getActivePool");
    }
  },

Я добавил проверку, чтобы предотвратить вызов конечной точки при каждом вызове страницы. обновляется и activePool уже установлен. Чтобы на самом деле загрузить activePool в компонент, я создал вычисляемое свойство: 

computed: {
    activePool() {
      return this.$store.getters.activePool;
    },
  },

Все это работает, когда конечная точка возвращает свои данные, но до этого я получаю сообщение об ошибке другого вычисляемого свойства, которое зависит от объекта activePool: 

maxToSpend() {
      return this.activePool.inGameBudget;
    },

Вопрос 1: как мне убедиться, что maxToSpend не вычисляется до тех пор, пока activePool фактически не установится? Я могу просто добавить дополнительную проверку if (this.activePool) {, но тогда мне придется сделать это для всех вычисленных свойств.

Вопрос 2: Я не знаю, возможно ли это, но как убедиться, что мне не нужно добавлять код для извлечения activePool из конечной точки и получать его, используя свойство computed в каждом из созданных мной компонентов: TeamSelector и PoolStandings?

Все помощь / предложения приветствуются! Дайте мне знать, если что-то неясно или требуется дополнительная информация.

Спасибо!

Jeroen

Ответы [ 2 ]

3 голосов
/ 24 января 2020

Как сделать так, чтобы maxToSpend не вычислялся до тех пор, пока активная установка activePool не установится?

В принципе, вы не можете этого сделать. Вычисленные свойства вычисляются сразу после создания компонента. См. Диаграмма жизненного цикла , вычисленные свойства вычисляются при внедрении Init и состоянии реактивности.

Я могу просто добавить дополнительную проверку if (this.activePool) {, но тогда я бы чтобы сделать это для всех вычисляемых свойств.

Вы можете использовать Getters : 

state: {
  ...
},
getters: {
  maxToSpend: state => {
    if (!state.activePool) return
    return state.activePool.inGameBudget
  }
},
actions: {
  ...
}

Затем вы можете использовать как: 

computed: {
  maxToSpend () {
    return this.$store.getters.maxToSpend
  }
}

Я не знаю, возможно ли это, но как убедиться, что мне не нужно добавлять код для извлечения activePool из конечной точки и получать его, используя свойство computed в каждом из компоненты, которые я создал: TeamSelector и PoolStandings?

В основном нет. Но если и TeamSelector, и PoolStandings имеют общего родителя (может быть, PoolMainPage?), То вы можете вызывать его только один раз от этого родителя.

По моему мнению, способ явной отправки обязательных действий для каждой необходимой ему страницы - это не плохая идея.

2 голосов
/ 23 января 2020

Вы можете смонтировать getPool, чтобы избежать ошибок при доступе к вложенным свойствам. Например: 

// in getters.js

const activePool = (state) => ({
  ...state.activePool,
  maxToSpend: state.activePool && state.activePool.inGameBudget,
})

activePool.inGameBudget будет всегда, независимо от обещания. Так что теперь вы можете получить доступ к this.activePool.inGameBudget; в .vue файле, и вы не получите ошибку.

...