I am attempting to trigger an action in my Vue component from my Vuex store.
Below is the content of my aliments.js file in the store:
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex, axios);
export const state = () => ({
aliments: {},
})
export const mutations = () => ({
SET_ALIMENTS(state, aliments) {
state.aliments = aliments
}
})
export const actions = () => ({
async getListAliments(commit) {
await Vue.axios.get(`http://localhost:3080/aliments`).then((response) => {
console.log(response);
commit('SET_ALIMENTS', response);
}).catch(error => {
throw new Error(`${error}`);
})
}
})
export const getters = () => ({
aliments (state) {
return state.aliments
}
})
I intend to display a list of aliments in my Vue template using :
{{ this.$store.state.aliments }}
To call my action, I have the following script:
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters(['loggedInUser', 'aliments']),
...mapActions(['getListAliments']),
getListAliments() {
return this.$state.aliments
}
}
}
</script>
However, I am having trouble identifying where I might be going wrong :/
Note: I have also attempted using an onclick method on a button with dispatch('aliments/getListAliments')... but it didn't yield the desired results...