从 main.js 访问存储

Question

I'm trying to access my store in my vue.js app from my main.js file. But for some reason store is undefined when I try to use it. Here is 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
  }
})

But when I try to read from the store it says it's undefined. I'm not sure why this is? I'm importing the store. Does anybody have ideas?

Answer 1

I feel const on class is the problem.

In main.js :

import store from './store/store'

Try this in your store.js: `

export default new Vuex.Store({
plugins: [createPersistedState({ paths: ['auth'] })],
state: {
},
getters: {
},
mutations: {
},
modules: {
auth,
flash,
userDropdown,
optionDropdown
}
})

`