Having trouble accessing my store in a Vue.js app from the main.js file. The issue is that the store object is showing up as undefined when I attempt to use it. Here's a snippet of my code:
main.js
import { store } from './store/store'
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
next({ path: '/' })
} else if (to.path === '/' && store.getters.isLoggedIn) {
next({path: '/dashboard'})
} else if (store.getters.isLoggedIn && !to.meta.requiresAuth) {
next({path: '/dashboard'})
} else {
next()
store.commit('CLOSE_USER_DROPDOWN')
}
})
store/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import optionDropdown from './modules/option_dropdown'
import userDropdown from './modules/user_dropdown'
import flash from './modules/flash'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export const store = new Vuex.Store({
plugins: [createPersistedState({ paths: ['auth'] })],
state: {
},
getters: {
},
mutations: {
},
modules: {
auth,
flash,
userDropdown,
optionDropdown
}
})
Despite importing the store, it still shows up as undefined when trying to read from it. Can't figure out why this is happening. Any insights or suggestions would be greatly appreciated.