I recently started using Nuxt + Vuex and I'm facing an issue where my simple component and store are not recognizing the actions and getters in Vuex. I'm not sure what the problem could be.
versions
# nuxt: 2.11
# vuex: 3.1.2
# vue: 2.6.11
store/properties.js
import axios from 'axios'
export const state = () => ({
properties: []
})
export const getters = {
allProperties: state => state.properties
}
export const actions = {
async fetchProperties ({ commit }) {
const response = await axios.get('http://localhost:3000/properties')
commit('setProperties', response.data)
}
}
export const mutations = {
setProperties: (state, properties) => (state.properties = properties)
}
pages/properties.vue
<template>
<div>
{{ allProperties }}
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: mapGetters(['allProperties']),
created () {
this.fetchProperties()
},
methods: {
...mapActions(['fetchProperties'])
}
}
</script>
When running this code, I get the following errors:
[vuex] unknown action type: fetchProperties
[vuex] unknown getter: allProperties
https://i.sstatic.net/Rm9JS.png
Why aren't the getter and action being recognized or registered?
Thank you for your help.