We are trying to migrate a Vue 2 application to Vue 2.7 but are running into some issues combining the API and Vuex.

In our current application, we use the@vue/composition-apipackage to let us use composables. Within these composables, we need to access the store and get it like this:

...rest of the component setup(props, { parent }) { const store = parent.$store someComposable({ store }) }

However, when we upgraded the Vue version to 2.7, this syntax was no longer supported. We need to use theuseStorecomposable in Vuex to access the store. This only works with Vuex version 4.

When upgrading Vuex version 4 on the current version of Vue, we see the following error:

WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 14:9-15 export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24 WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 132:14-25 export 'effectScope' (imported as 'effectScope') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24 WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 140:27-35 export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24 WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 148:17-25 export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24 WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 362:2-7 export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24 WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 1101:9-14 export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default) @ ./src/plugins/vuex.js 4:0-24 5:8-12 @ ./src/app.js 11:0-24

This makes sense since they are part of the composition API and are not available on the version of Vue we are using (2.6.14). But Vuex version 4 and Vue version 2.7 don't seem to work together either.

When we run the application using Vuex^4.1.0and Vue2.7.13we see the following error:

[Vue warn]: Error in render: "TypeError: this.$store is undefined"

How do we make Vue 2.7 work with Vuex and the composition API? Specifically, how do we access Vuex storage in composables on Vue 2.7?