Vuex: Vuex store state is undefined

Created on 25 Feb 2017  路  4Comments  路  Source: vuejs/vuex

I am trying to use Vuex ("^2.1.3") with vuejs ("^2.1.10") project in this way:

store.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        inTheaters: [
            {
                name: 'Resident Evil: The Final Chapter',
                poster_url: 'https://blackgirlnerds.com/wp-content/uploads/2017/02/Resident-Evil-The-Final-Chapter-Final-Poster-Featured.jpg',
                language: 'English',
            },
            {
                name: 'Irada',
                poster_url: 'http://filmywave.com/wp-content/uploads/2017/02/irada-movie-poster-1.jpg',
                language: 'Hindi',
            },
        ]
    },
});

main.js:

import store from './store';

new Vue({
    router,
    components: {App},
    template: '<App/>',
    store,
}).$mount('#app');

some-component.js:

<script>
    export default {
        name: 'movieListWrapper',
        props: {
            movieListType: {
                type: String,
                default: 'in-theateras',
            },
        },
        computed: {
            movieList() {
                return this.$store.state.inTheaters;
            }
        },
    }
</script>

I now have two problems:

First is I get a warning in my console

"export 'default' (imported as 'store') was not found in './store'

The other problem is that the state is not defined.

Uncaught TypeError: Cannot read property 'state' of undefined

I am very new to this and may be I am missing some thing so please pardon me. What am I missing?

Most helpful comment

@jalasem You posted your GoogleMaps API key.

All 4 comments

Your store module has no default export, because you only export a named export: export const store.

The following should work:

import { store } from './store'

PS: Your issue is a usage/support question, and the issue tracker is reserved exclusively for bug reports and feature requests (as outlined in our Contributing Guide).

We encourage you to ask your next question on the forum , Stack Overflow or on gitter and are happy to help you out there.

here is my store

import Vue from 'vue'
import Vuex from 'vuex'
import createPersist from 'vuex-localstorage'

Vue.use(Vuex)
const createStore = () => {
  return new Vuex.Store({
    state: {
      userType: '',
      authToken: '',
      lastPage_tried: '',
      lastPage: '',
      profile: {
        pic: '',
        firstname: '',
        middlename: '',
        lastname: ''
      }
    },
    mutations: {
      SET_USER (state, data) {
        state.authToken = data.token
        state.userType = data.userType
        state.profile.pic = data.profile_pic
        state.profile.firstname = data.firstname
        state.profile.middlename = data.middlename
        state.profile.lastname = data.lastname
        state.profile.username = data.username
      },
      CLEAR_USER (state) {
        state.authToken = ''"
        state.userType = ''"
        state.profile = {}
      },
      CHANGE_LAYOUT (state, layout) {
        state.preferedLayout = layout
      }
    },
    plugins: [createPersist({
      namespace: 'mDr',
      expires: 7 * 24 * 60 * 60 * 1e3
    })]
  })
}

export default createStore

and in my main.js, I have this

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import moment from 'moment'

import mixins from '@/plugins/mixins'
import * as VueGoogleMaps from 'vue2-google-maps'
import Notifications from 'vue-notification'
Vue.use(Notifications)
Vue.use(VueGoogleMaps, {
  load: {
    key: '----REDACTED----',
    libraries: 'places' 
  }
})

Vue.prototype.$eventBus = new Vue()
Vue.mixin(mixins)
Vue.config.productionTip = true

new Vue({
  el: '#app',
  router,
  store,
  moment,
  template: '<App/>',
  components: { App }
})

Yet I get undefined on store values

@jalasem You posted your GoogleMaps API key.

I edited his comment, thanks for the tip!

Was this page helpful?
0 / 5 - 0 ratings