Upgrading vuex 3 to 4
Breaking3.6.2 → 4.1.0Breaking11New5Changed2Fixed15Other2
BreakingUpgrade verdict
9 breaking changes.
In plain terms
- TypeScript no longer knows the type of this.$store automatically. You need to add a small declaration file to your project.
- TypeScript projects no longer get this.$store typed automatically and must add a small declaration file to keep it working.
- This version works with Vue 3 and keeps the same API as before, but a few things changed that may require updates.
- When adding Vuex to your app, you now give the app your store object directly.
Must act Top 3 of 9 that need code or config changes
Adds @vue/devtools-api ^6.0.0-beta.11.
Installs 1 package in all (was 0).
What you must change
Breaking9
Removes global typings for this.$store in Vue components; TypeScript users must declare their own module augmentation.
ComponentCustomPropertiesthis.$storeStoreStateRemoves global typings for this.$store in Vue components; TypeScript users must declare their own ComponentCustomProperties augmentation.
this.$storeComponentCustomPropertiesStoreStateVuex 4 supports Vue 3 and provides the same API as Vuex 3, with a few breaking changes described in the release.
Installing Vuex on a Vue instance now passes the store instance to app.use instead of Vuex itself.
app.useBundles are realigned with Vue 3, including IIFE global builds, esm-browser, esm-bundler and cjs builds.
vuex.global(.prod).jsvuex.esm-browser(.prod).jsvuex.esm-bundler.jsvuex.cjs.jscreateLogger is now exported from the core vuex module instead of vuex/dist/logger.
createLoggerAligns bundle outputs with Vue 3: vuex.global(.prod).js, vuex.esm-browser(.prod).js, vuex.esm-bundler.js and vuex.cjs.js replace the previous bundle set.
vuex.global(.prod).jsvuex.esm-browser(.prod).jsvuex.esm-bundler.jsvuex.cjs.jsGlobal builds are now IIFEs rather than UMD builds and are only meant for direct use via a script tag.
vuex.global(.prod).jsInstallation process changes: use the new createStore function to create a store instance instead of new Store(...).
createStoreStoreAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
interface ComponentCustomOptions - added:
property ComponentCustomOptions.store?: Store<any>
- removed:
interface ComponentOptions<V extends Vue> - removed:
property ComponentOptions.store?: Store<any>
- removed:
interface Vue - removed:
property Vue.$store: Store<any>
- removed:
export { createLogger } - removed:
function install(Vue: typeof _Vue): void - changed:
const _default: { Store: typeof Store; install: typeof install; mapState: typeof mapState, mapMutations: typeof mapMutations, mapGetters: typeof mapGetters, mapActions: typeof… → const _default: { Store: typeof Store; mapState: typeof mapState, mapMutations: typeof mapMutations, mapGetters: typeof mapGetters, mapActions: typeof mapActions, createNamesp… - added:
const storeKey: string - added:
function createStore<S>(options: StoreOptions<S>): Store<S> - added:
function useStore<S = any>(injectKey?: InjectionKey<Store<S>> | string): Store<S> - added:
method Store.install(app: App, injectKey?: InjectionKey<Store<any>> | string): void
- changed:
default function createLogger<S>(option?: LoggerOption<S>): Plugin<S> → function createLogger<S>(option?: LoggerOption<S>): Plugin<S>
- removed:
declare module 'vue/types/options' - removed:
declare module 'vue/types/vue' - added:
declare module '@vue/runtime-core'