How to Inject Vuex store into Vue 3

Question

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

Answer 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`


}

Answer 2

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