How do I pass store to the vue instance in vue 3?

user_13040656 0
Viewed 1852

The vuex docs specify that you have to pass the created store to the vue instance like so

new Vue({
  el: '#app',
  store: store,
})

My problem is that I created a new vue project using the CLI, and that mounts the app in mian.js using create app like so:

import App from './App.vue'


const app = createApp(App)
app.mount('#app')

How to I pass the store using the second method so I can acces it from any component, or how do I correctly mount the app using the first method ? What's the difference between them ?

From my understanding createApp() is new in vue 3, I'm not sure how it works, I can't seem to find the right docs, what's the difference between new Vue({}) and createApp() ?

I'm sure I'm not understanding some basic concept, but I don't know which one...

Thank you.

vuex vue.js
1 Answers

You should use createStore from vuex v4 rc and then call app.use(store):

store.js

import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

app.js

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

See Vuex v4 installation process

user_13766180
Related