Как вызвать action и вернуть getters в vuex?

Пользователь

от jakayla , в категории: JavaScript , год назад

Как вызвать action и вернуть getters в vuex?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от miguel_ritchie , год назад

@jakayla 

Вы можете вызвать action используя dispatch:

1
this.$store.dispatch('actionName', payload)


payload - это необязательный параметр, который может быть передан в action.


Чтобы вернуть значение getters, используйте mapGetters в компоненте:

1
2
3
4
5
6
7
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getterName'])
  }
}


Теперь вы можете использовать значение getters, как обычный свойство компонента:

1
this.getterName


Пользователь

от sylvester , 3 месяца назад

@jakayla 

Вот пример более полной реализации использования actions и getters в Vuex:


В файле store.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    value: null
  },
  mutations: {
    setValue(state, value) {
      state.value = value
    }
  },
  actions: {
    fetchData({ commit }) {
      return new Promise((resolve, reject) => {
        // Выполнение асинхронного запроса
        // Здесь можно вызывать API, получать данные и обновлять состояние в хранилище через mutations
        setTimeout(() => {
          const data = 'some data'
          commit('setValue', data)
          resolve()
        }, 1000)
      })
    }
  },
  getters: {
    getValue: state => state.value
  }
})

export default store


В компоненте, где вы хотите вызвать action и получить значение getters:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <button @click="fetchData">Запросить данные</button>
    <p>{{ value }}</p>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getValue']),
    value() {
      return this.getValue
    }
  },
  methods: {
    ...mapActions(['fetchData'])
  }
}
</script>


В данном примере, при нажатии на кнопку "Запросить данные", вызывается action "fetchData", который выполняет асинхронный запрос и обновляет состояние хранилища через mutation "setValue". Значение из getters "getValue" получается и отображается в компоненте.