I'm trying to use Vuex with Vue 3. Here is my code in main.js:
import { createApp } from 'vue';
import App from './App.vue';
import Vuex from 'vuex';
const app = createApp(App);
app.use(Vuex);
const store = new Vuex.Store({
state: {
counter: 0
}
});
app.store(store);
app.mount('#app');
When trying this, I get the following error:
Uncaught TypeError: Vue is not a constructor
I have tried using the syntax recommended in the official Vuex docs but this does not work either. Does anyone know how to fix this?
This error occurs because you are calling new Vuex.Store as is done for Vuex 3.
If you are using Vue 3, you must install Vuex 4 by issuing:
# npm
npm install --save vuex#next
# yarn
yarn add vuex#next
Then build your store and "inject" it to the Vue instance as follows:
import { createStore } from 'vuex';
import { createApp } from 'vue';
const store = createStore({
state () {
return {
count: 1
}
}
})
const app = createApp({ /* your root component */ });
app.use(store);
Refer to Vuex docs for more details:
Vuex 4 for Vue 3
Related
Right now we can access pinia store only with Vue app
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import mainStore from 'store/main.store';
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
const store = mainStore();
app.mount('#app')
But how we access Pinia store without Vue app? Somehting like this, as it was done with vuex.
import { createPinia } from 'pinia'
import mainStore from 'store/main.store';
const pinia = createPinia()
const store = mainStore();
Looking at the source code, pinia is implemented using the vue plugin, and the pinia object is passed with provide() inject(), so it cannot run without the vue environment.
I was trying to use vuex in my vue project.When I directly use the store everything is fine.But when I try to put the store in module then use it,everything just gone.
Also,if I import router from my router.js and use it ,everything will gone.
Super confused about it.
the way I directly use it
import a from "./store/modudel/a"
the way I put in module
// main.js
import store from "./store/index";
createApp(App)
.use(store)
.mount("#app");
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import a from './module/a';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
a
}
});
Your store/index.js contains code specific to Vue 2, but your main.js is for Vue 3. This code should be causing linter errors in the dev terminal or runtime errors in the browser console.
Assuming you have a Vue 3 project with Vuex 4, the equivalent store code would be:
// store/index.js
import { createStore } from 'vuex';
import a from './module/a';
export default createStore({
modules: {
a
}
});
I am using vue 2.6.14 and composition-api 1.3.3 package to use composition api. I have
my main.js like
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I try to setup a store
I have a src folder / store folder / index.js
and inside the index.js
import { reactive } from '#vue/composition-api'
const state = reactive({
counter : 0
})
export default{ state }
inside App.vue I try to import store to use it
<script>
import store from '#/store'
</script>
I get the error Uncaught Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
I tried all solutions from here and nothing works. If I remove the import store from '#/store' the error goes away. Using vue 3 s not an option.
How can I solve this?
Thanks
imports are automatically hoisted to the top of the file, so it actually precedes the Vue.use(VueCompositionApi) at runtime.
So these lines:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
import App from './App.vue' 👈 hoisted
...become:
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
import App from './App.vue' 👈
Vue.use(VueCompositionAPI)
So the plugin doesn't get installed before App.vue gets imported, leading to the error you observed.
Option 1: Move plugin installation to own file
You can move the installation of #vue/composition-api into its own file that could be imported before App.vue:
// lib/composition-api.js
import Vue from 'vue'
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
// main.js
import Vue from 'vue'
import './lib/composition-api'
import App from 'App.vue'
demo 1
Option 2: Use require() in App.vue
require the store in the component's setup(), where the #vue/composition-api would've already been installed:
// App.vue
import { defineComponent, computed } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = require('#/store').default
return {
counter: computed(() => store.state.counter),
increment: () => store.state.counter++,
}
},
})
demo 2
Option 3: Use import() in App.vue
Dynamically import the store with import(). This is especially needed in Vite, which does not have require().
// App.vue
import { defineComponent, computed, ref } from '#vue/composition-api'
export default defineComponent({
setup() {
const store = ref()
import('#/store').then(mod => store.value = mod.default)
return {
counter: computed(() => store.value?.state.counter),
increment: () => store.value && store.value.state.counter++,
}
},
})
demo 3
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
I am using Vuejs with Webpack.
Here's store.js:
import Vuex from "vuex";
export default new Vuex.Store({
state: {
count : 0
},
mutations: {
increment (state) {
state.count++
}
}
});
Here is my app.js:
"use strict";
import Vue from 'vue';
window.Vue = Vue;
import MyComponent from './MyComponent.vue';
import store from './store.js';
window.App = new Vue({
el : '#my-app',
store,
components : {
'my-component' : MyComponent
}
});
Here is the script from MyComponent.vue:
export default {
computed : {
count() {
return this.$store.state.count;
}
},
mounted() {
console.log(this.$store)
}
}
Any reference to this.$store in my component is undefined. Why?
You need to install the Vuex plugin somewhere to allow Vue components to access the store. As Pavan noted, to do this you must include the following lines somewhere (in your app's index.js, in your store.js etc) before you create your Vue instance:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
This tells Vue what to do with the store instance when you create the instance, which will make it available under this.$store in your components. This also ensures that Vuex also knows how to interact with Vue. Without it, you will not be able to use Vue and Vuex together properly.
Regarding your later answer, you can export the store instance just fine, and import it into your index.js, router config etc. For example:
store.js:
import Vuex from "Vuex";
export default new Vuex.Store({ /* store config */ });
MyComponent.vue's <script> block:
export default {
mounted() {
console.log(this.$store); // will log the store instance
}
}
index.js:
import Vue from "vue";
import Vuex from "vuex";
import store from "./store";
import MyComponent from "./components/MyComponent.vue";
Vue.use(Vuex);
const app = new Vue({
el: "#my-app"
store,
components: { MyComponent },
// any other options as needed
});
You should add these 2 lines in your store.js
import Vue from "vue";
Vue.use(Vuex);
There's no way you can instantiate store without actually saying the second statement above. So, you need to import Vue in your store.js
OK, so the reason I wanted to go down this path was to separate the store code from the rest of the application.
I have managed to do that by exporting a default object from store.js, where that object is only the configuration for the store (i.e. not a store instance). I then instantiate the store in my app.js, using the imported configuration.
I will leave this answer open for a few days in case someone wants to provide a way to export/import the instance itself.