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?
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!
Most helpful comment
@jalasem You posted your GoogleMaps API key.