Как правильно забрать данные с сервера используя Vue, Vuex?

269

01 февраля 2019, 10:00

Учусь писать на vuejs. Есть компонент c кнопкой, при клике хочу получить данные и записать их в store. Как правильно это реализовать? Нашел 2 решения, какое из них правильное или может оба не правильные? И почему?

В первом вариант делаю запрос используя actions, во втором прямо из компонента.

Вариант 1

<!-- STORE --> 
export default new Vuex.Store({ 
  state: { 
    items: [] 
  }, 
  getters: { 
    getItems(state) { 
      return state.items 
    } 
  }, 
  mutations: { 
    updateItems(state, data) { 
      state.items = data 
    } 
  }, 
  actions: { 
    loadItems({commit}) { 
      Vue.http.get(url).then(res => { 
        commit('updateItems', 
          res.body) 
      }) 
    } 
  } 
})

<!-- КОМПОНЕНТ --> 
<template> 
	<div>  
		<button @click="search">Click</button> 
		{{items}} 
	</div> 
</template> 
 
<script> 
  export default { 
    computed: { 
      items() { 
        return this.$store.getters.getItems 
      } 
    }, 
    methods: { 
      search() { 
        this.$store.dispatch('loadItems'); 
      } 
    } 
  } 
</script>

Вариант 2

<!--Store как в первом варианте--> 
<!--КОМПОНЕНТ--> 
<template> 
	<div> 
		<button @click="search">Click</button> 
		{{items}} 
	</div> 
</template> 
 
<script> 
export default { 
  computed: { 
    items() { 
      return this.$store.getters.getItems 
    } 
  }, 
  methods: { 
    search() { 
      this.$http.get(url) 
        .then(response => { 
          const items = response.body; 
          this.$store.commit('updateItems', items); 
        }) 
    } 
  } 
} 
</script>

Answer 1

Правильный вариант номер 1.

Во vuex для изменения состояния store из компонентов нужно использовать actions. Потому что мутации должны быть синхронными, для actions таких ограничений нет, внутри actions можно выполнять асинхронные операции.