Vue js "store is not defined" in router.js

Question

I want to perform a redirect, but before the redirect happens i want to perform a action using store.dispatch. Error is "store is not defined" in the console.

I have tried putting the whole line of code in a variable and check if true and if null, the error dissapears but the actions never gets called, and the debugger shows vue is jumping over the if-statement.


import Vue from 'vue'
import store from './store/index'
import Router from 'vue-router'
import Settings from './views/Settings.vue'


Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/myPath',
            name: 'myPathName',
            component: {},
            beforeEnter(to, from, next) {
                //STORE is not defined
                store.dispatch("path/MY_ACTION");
                    next({
                        name: "destinationPath", 
                    })
            }
        }
-----------------------------------------------------------------------------
MY STORE
// STORE -> MODULES -> CONFIGURATION -> INDEX
import windowsModule from "../windows/index"
import mainDoorModule from "../maindoor/index"
import doorLeavesModule from "../doorleaves/index"
import doorModule from "../door/index"
import actions from "./actions"
import mutations from "./mutations"

export default {
    namespaced: true,
    modules: {
        windows: windowsModule,
        mainDoor: mainDoorModule,
        doorLeaves: doorLeavesModule,
        door: doorModule
    },
    state: {
        configurationId: 0,
        savedConfigurationsViewModel: [],
        errors: {},
        configurationsToSend: []
    },
    mutations,
    actions
}

//THE ACTION I AM TRYING TO REACH INSIDE ACTIONS
// STORE -> MODULES -> CONFIGURATION -> ACTIONS 

GET_DEFAULT_CONFIGURATION({ commit }) {
    commit('SET_CONFIGURATION', {
        //DATA
    }
}

Update your code with a larger fragment, because if it is not a component but a main module, it may mean that you have installed it incorrectly. — Gander
– Gander, Commented Dec 9, 2019 at 13:06
@Gander so i've added to show some imports, but i dont really know what would make sense to show. Thanks for the answer! — Alexander
– Alexander, Commented Dec 9, 2019 at 13:14

Gander · Accepted Answer · 2019-12-09 13:29:08Z

1

You need to install it in the main component. Then you refer to this through this.$store. Read the Vuex documentation.

export const store = new Vuex.Store({
  state: {},
  mutations: {},
  getters: {}
})

import store from './store/index'

new Vue({
  store, // <- here
  el: '#app'
})

answered Dec 9, 2019 at 13:29

Gander

2,0111 gold badge25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander · Accepted Answer · 2019-12-09 13:48:17Z

0

So it resolved. It was a Chrome bug saying that store is undefined, it's in webpack. Store was defined. The problem was the mismatch between actions and mutations sending payloads that did not match types.

Thanks for all the answers, i appreciate it.

answered Dec 9, 2019 at 13:48

Alexander

15 bronze badges

Collectives™ on Stack Overflow

Vue js "store is not defined" in router.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related