How would I inject vuex into Vue 3, in Vue 2 it was possible like:
new Vue({
el: '#app',
store: store,
})
But in Vue 3 how would you do it since there is no new Vue().
How would I inject vuex into Vue 3, in Vue 2 it was possible like:
new Vue({
el: '#app',
store: store,
})
But in Vue 3 how would you do it since there is no new Vue().
- 1 github./vuejs/vuex/tree/4.0#breaking-changes – Keith Nicholas Commented Nov 10, 2020 at 21:37
2 Answers
Reset to default 12The created store will be injected using .use method :
import { createApp } from 'vue'
import { createStore } from 'vuex'
// Create a new store instance.
const store = createStore({
state () {
return {
count: 1
}
}
})
const app = createApp({ /* your root ponent */ })
// Install the store instance as a plugin
app.use(store)
For more details check the Vuex 4 docs
To use it in child ponent in options api, try to provide it as follows :
app.use(store)
app.config.globalProperties.$store=store;
then use it like $store in child ponents
for position api (setup hook), you could just import the useStore posable function which returns the store instance :
import {useStore} from 'vuex'
setup(){
const store=useStore()// store instead of `$store`
}
Together with Router:
import * as Vue from 'vue';
import App from './App.vue';
import router from './routes';
import {store} from "./store/store";
Vue.createApp(App).use(router, store).mount('#app');