I think i have a rare question. I've separate main.js and store.js file, so in store.js file i've imported Vuex and setup a new vuex store then exported it. After that, i've imported this file in main.js file and set up its requirement (import Vuex again in main.js and Vue.use(Vuex) here). But it doesn't work in this way. I've to write Vue.use(Vuex) inside store.js file, Otherwise it throws this error: Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
main.js file:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
import App from './App.vue'
import {store} from './store/store.js';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
and store.js file:
import Vuex from "vuex";
export const store = new Vuex.Store({
state: {
counter: 0
}
});
Although i've called import {store} from './store/store.js'; after Vue.use(Vuex), so Vuex instance inside store.js file doesn't get executed before Vue.use(Vuex)
I suspect that problem is webpack based, but i can't be sure.
Change store.js to import Vue and use Vuex:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
counter: 0
}
});
Then remove Vue.use(Vuex) from main.js file:
import Vue from 'vue'
import App from './App.vue'
import {store} from './store/store.js';
new Vue({
el: '#app',
store: store,
render: h => h(App)
})
It's perfectly okay to have a use statement in store.js. This is in fact how it would be (at least at one point) generated using a tool like #vue/cli if you select the vuex option.
Hopefully that helps!
Related
working with Laravel + Vue 3 project. I need work with Vuex in the project. I have configure My Vuex in store.js file as following
import { createApp } from 'vue'
import { createStore } from 'vuex'
const store = createStore({
/* state, actions, mutations */
state : {
counter : 1000
}
});
const app = createApp();
app.use(store);
app.mount("#app");
and My app.js file as following
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'
import store from './store' //import store.js
createApp({
components: {
mainapp,
}
}).use(router).use(ViewUIPlus).mixin(common).mount('#app');
now I am unable to how to import store.js in to the app.js file. could you give some solution here
Important note: Vue core team members (including Vuex authors) highly recommend using Pinia instead of Vuex for new projects, on the very first page of Vuex docs.
You're currently creating two separate apps:
one in store.js (which has the store but nothing else)
one in app.js (which has everything but the store).
You probably want to add the store to the app in app.js, not to a separate app. You should export the store from store.js and import + use it into app.js:
store.js
export const store = createStore({
//...
})
app.js:
import { store } from './store'
const app = createApp({
//...
})
.use(router)
.use(store)
.use(ViewUIPlus)
.mixin(common)
.mount('#app')
I have problem with using commit like is described here. Probably problem is in that I use export default new Vuex.Store.
Here is my index.js file, i unfortunately have : warning in ./src/store/index.js "export 'default' (imported as 'Vue') was not found in 'vue' where I use Vuex and I want to call commit:
import Vue from 'vue'
import Vuex from "vuex";
Vue.use(Vuex);
import state from "./state";
import * as getters from './getters';
import * as mutations from'./mutations';
import * as actions from './actions';
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
Following a simple example in VueMaster course and can't seem to read state from the store. Here's my main.js:
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
And here's my index.js in the /store folder:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: { id: 'abc123', name: 'Adam Jahr' },
},
mutations: {},
actions: {},
modules: {}
})
Then, I try and read the state object from a component:
<template>
<div>
<h1>Create an Event, {{ $store.state.user.name }}</h1>
</div>
</template>
I don't see anything in the browser for the component. Console shows an error "TypeError: Cannot read property 'name' of undefined".
Any idea why this very simple example doesn't work? Thanks.
Shouldn't your import look like this:
import store from './store/index'
since that is where you are creating your store, check the folder structure, maybe that is the problem.
I didn't see any problem with your code, it's working as expected.
Here is sandbox link - https://codesandbox.io/s/silly-poitras-sosvs?file=/src/App.vue
You need to provide the store in your component
Something in computed like
return this.$store.state.user
I have import Vue in main.js and also in index.js where I created a Vuex store. How to import Vue only one time? Or it is normal?
Can I import Vuex and Vue only in mainjs and call that also in main.sj Vue.use(Vuex)?
main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store'
import router from './router'
import VueCookies from 'vue-cookies'
import { i18n } from './plugins/i18n'
Vue.use(VueCookies)
Vue.store = store
App.router = Vue.router
App.i18n = i18n
App.store = store
new Vue(App).$mount('#app');
and index.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const store = new Vuex.Store({
modules: {
auth
},
strict: debug,
});
export default store;
It is not imported twice. It is registered in a namespace in such a way, that all the modules (files) importing it, refer to the same module.
Don't worry, it's not imported twice.
I have a Vue app that I'm trying to convert to server-side rendering.
Currently, the app attaches to the root HTML element through this file:
import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';
Vue.config.productionTip = false;
new Vue({
router,
...AppLayout,
store
}).$mount('#app');
I would like to export this root file for my server-entry.js file.
What's the most efficient way to do this? Should I refactor the main.js file? Should I create a separate file, the only purpose of which would be to pull in all the imports listed above and export an app, then import it and mount it in main.js? What would that look like?
Here is what I have right now, which works:
app.js:
import Vue from 'vue';
import AppLayout from './theme/Layout.vue';
import router from '../router';
import store from './vuex/index';
Vue.config.productionTip = false;
const app = new Vue ({
router,
...AppLayout,
store
});
export {app, router, store};
main.js:
import {app} from './app';
app.$mount('#app');