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

Question

[Михаил]

Вижу много разных примеров. Допустим есть страница, которая выводит данные полученные с апи. Работает через стор 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')
  }

+ еще много примеров. Вроде как все работают. Но все таки в чем тонкость и разница?
Как правильно сделать такое получение. При загрузки страницы делаем запрос на АПИ получаем данные, записываем в стор и в компоненте получаем и отрисовываем?

Answer 1

[Swert]

Компонент

<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
  }

Comments

[Михаил]

И что это за??? В какой момент жизненного цикла или вообще откуда вызывается store.dispatch ?

[Swert]

Михаил, в компоненте, в котором хотим получить данные , добавляем метод store.dispatch

[Михаил]

IVinete, Вне жизненного цикла? То что в компонент добавить это как божий ден ясно.
Куда правильно? В create или в mounted или еще куда. Способов же много, я в вопросе это спрашиваю)

[Swert]

Михаил, это зависит от ваших потребностей. Про хуки почитайте здесь