Vue 2.7 Combination API + Vuex

Question

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-api package 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 the useStore composable 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.0 and Vue 2.7.13 we 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?

Answer 1

In your store:

const store = new Vuex.Store({ ...options })
export default store;
export const useStore = () => store

In any component, including subcomponents:

setup() {
  const store = useStore();
  // ...
}

If you have multiple stores, name the stores and their use features accordingly.