I'm using vue and vuex and I'm getting the error Can not read property 'getters' of undefined.
Snacbar.js file
// tipos de mutaciones
import {
SET_SNACKBAR,
SET_Y,
SET_X,
SET_MODE,
SET_COLOR,
SET_TIMEOUT,
SET_TEXT
} from './mutation-types'
// state
const state = {
snackbar: false,
y: '',
x: 'right',
mode: '',
color: '',
timeout: 4000,
text: ''
}
// getters
const getters = {
snackbar: state => state.snackbar,
y: state => state.y,
x: state => state.x,
mode: state => state.mode,
color: state => state.color,
timeout: state => state.timeout,
text: state => state.text
}
// action
const actions = {
pos: ({ commit }, breakpoint) => {
if (breakpoint < 600) {
commit(SET_Y, 'bottom')
} else {
commit(SET_Y, 'top')
}
},
conf: ({ commit, dispatch }, payload) => {
commit(SET_COLOR, payload.color)
commit(SET_TEXT, payload.text)
}
}
// mutations
const mutations = {
[SET_SNACKBAR] (state, snackbar) {
state.snackbar = snackbar;
},
[SET_X] (state, x) {
state.x = x;
},
[SET_Y] (state, y) {
state.y = y;
},
[SET_MODE] (state, mode) {
state.mode = mode;
},
[SET_COLOR] (state, color) {
state.color = color;
},
[SET_TIMEOUT] (state, timeout) {
state.timeout = timeout;
},
[SET_TEXT] (state, text) {
state.text = text;
}
}
export default {
state,
getters,
actions,
mutations
}
Store.js file
import Vue from 'vue'
import Vuex from 'vuex'
import Snackbar from './Snackbar'
Vue.use(Vuex)
Vue.config.debug = true
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
Snackbar
},
strict: debug
})
Main.js file
// vue
import Vue from 'vue'
// component
import App from './assets/js/App.vue'
// store
import Store from './assets/js/vuex/Store'
const app = new Vue({
el: '#app',
Store,
render: h => h(App)
})
Component VUE (Snackbar.vue)
<template>
<v-snackbar
:timeout="timeout"
:top="y === 'top'"
:right="x === 'right'"
:color="color"
:value="snackbar"
@input="close">
{{ text }}
</v-snackbar>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
computed: {
...mapGetters([
'snackbar',
'x',
'y',
'color',
'timeout',
'text'
])
},
methods: {
...mapMutations({
setSnackbar: 'SET_SNACKBAR',
}),
close: function () {
this.setSnackbar(false)
}
}
}
</script>
The error tells me that it is in the Snackbar component. But I do not know what the problem is.