@Sergo94Min
Разработчик

Как правильно получать данные из компонента VUE JS с Vuex?

Вижу много разных примеров. Допустим есть страница, которая выводит данные полученные с апи. Работает через стор Vuex

Пример 1
computed: {
    items: {
      get() {
        return this.$store.getters["mayModule/getItems"];
      },
      set() {
        this.$store.dispatch('mayModule/fetchItems')
      }
    },
  },


Пример 2
computed: {
    ...mapGetters({
    items: 'mayModule/getItems',
  }),
},
created() {
    this.$store.dispatch('mayModule/fetchItems')
},


Пример 3 как и пример 2. Только fetchItems через mounted()

mounted() {
    this.$store.dispatch('mayModule/fetchItems')
  }


+ еще много примеров. Вроде как все работают. Но все таки в чем тонкость и разница?
Как правильно сделать такое получение. При загрузки страницы делаем запрос на АПИ получаем данные, записываем в стор и в компоненте получаем и отрисовываем?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
IVinete
@IVinete
Учусь на ошибках!
Компонент

<template>
<p>{{ data }}</p>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

const store = useStore()

const data = computed(() => store.state.user.data)

store.dispatch('user/get', userId)

</script>



Store

const state = {
    data: []
}

const getters = {}

const actions = {
    async get ({commit}) {
        try {
            // Запрос к апи
            commit('setUser', result)
        } catch (error) {
            throw error
        }
    }
}

const mutations = {
    setUser (state, payload) {
      state.status = 'success'
      state.data = payload
    }
  }
  
  export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  }

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы