Как обращаться с vuex store для извлечения данных из остальных API?

Question

Я использую Vuex для обработки своего состояния приложения.

Мне нужно сделать запрос Ajax Get для API остальных и затем показать список некоторых объектов.

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

Теперь у меня есть это:

//component.js
created(){
      this.$store.dispatch("fetch").then(() => {
        this.objs = this.$store.state.objs;
      })
    }

Но я не думаю, чтоприсвоение входящих данных локальному свойству является правильным способом обработки данных хранилища.

Есть ли способ справиться с этим лучше?Может быть, с помощью mapState?

Спасибо!

Answer 1

Есть много способов сделать это, вы должны поэкспериментировать и найти тот, который соответствует вашему подходу самостоятельно. Это то, что я предлагаю

{ // the store
  state: {
    something: ''
  },
  mutations: {
    setSomething (state, something) {
      // example of modifying before storing
      state.something = String(something)
    }
  },
    actions: {
      fetchSomething (store) {
        return fetch('/api/something')
          .then(data => {
            store.commit('setSomething', data.something)
            return store.state.something
          })
      })
    }
  }
}

{ // your component
  created () {
  this.$store
    .dispatch('fetchSomething')
    .then(something => {
      this.something = something
     })
    .catch(error => {
       // you got an error!
     })
  }
}

Для лучшего объяснения: https://vuex.vuejs.org/en/actions.html

Теперь, если вы обрабатываете ошибку в самом действии, вы можете просто вызвать действие и использовать вычисляемое свойство, ссылающееся на значение в хранилище

{
  computed: {
    something () { // gets updated automatically
      return this.$store.state.something
    }
  },
  created () {
    this.$store.dispatch('loadSomething')
  }
}