Vuex Store Integration

Introduction

Vuex has had a new major release to catch up with Vue 3, similar to VueRouter.

Unlike VueRouter though, Vuex's API has stayed 100% the same, except for how to create the store and register it as a plugin. That part now mirrors what Vue and VueRouter do with createApp and createRouter, so the APIs are aligned nicely.

Then, in Vue 2

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // omitted
})

import Vue from 'vue'
import store from './store'

const app = new Vue({
  store
}).$mount('#app')

Now, in Vue 3

import { createStore } from 'vuex'

export default new createStore({
  // omitted
})

import Vue from 'vue'
import store from './store'

const app = createApp({ /* */ })
app.use(store)
app.mount('#app')

Migrating the real app

in our app, the changes exemplified above can be applied pretty much verbatim, so if you want to have a look at what was done, just checkout this diff

Further Reading