TypeError: Can not read property 'getters' of undefined

0

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.

    
asked by Roman González 20.06.2018 в 07:12
source

0 answers