CODEWITHSUNDEEP
javascriptvue.jsvuexvuejs3vue-composition-api
svoruganti
svoruganti

Reputation: 682

How to Inject Vuex store into Vue 3

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().

Upvotes: 4

Views: 16013

Answers (2)

Anil
Anil

Reputation: 33

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');

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

The 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 component */ })

// Install the store instance as a plugin
app.use(store)

For more details check the Vuex 4 docs

To use it in child component in options api, try to provide it as follows :

app.use(store)

app.config.globalProperties.$store=store;

then use it like $store in child components

for composition api (setup hook), you could just import the useStore composable function which returns the store instance :

import {useStore} from 'vuex'
setup(){
const store=useStore()// store instead of `$store`


}

Upvotes: 12

Related Questions