Как вызвать action и вернуть getters в vuex?
2 ответа
от
miguel_ritchie ,
3 года назад
@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 ,
2 года назад
@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" получается и отображается в компоненте.
15