Vue 2.7 With Composition API Vuex-CodePudding

We're trying to migrate our Vue 2 application to Vue 2.7 and having some issues with the composition API and Vuex.

In our current application, we're using the @vue/composition-api package to let us use composables. Within those composables we need access to the store, and get it like this:

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

However, when we upgrade our version of Vue to 2.7 this syntax is no longer supported. We need to use the useStore composable from Vuex to get access to the store. This is only available on Vuex version 4.

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

 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 because these are part of the composition API, and aren't available on the version of Vue that we're on (2.6.14). But it doesn't seem like Vuex version 4 and Vue version 2.7 work together either.

When we run our application with 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 can we get Vue 2.7 working with Vuex and the composition API? Specifically, how can we get access to the Vuex store in our composables on Vue 2.7?

CodePudding user response：

In your store:

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

In any component, including the child:

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

If you have more than one store, name the stores and their use functions accordingly.