Nous essayons de migrer une application Vue 2 vers Vue 2.7 mais nous rencontrons des problèmes combinant l'API et Vuex.

Dans notre application actuelle, nous utilisons le package @vue/composition-api pour nous permettre d'utiliser des éléments composables. Au sein de ces composables, nous devons accéder au magasin et l'obtenir comme ceci :

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

Cependant, lorsque nous avons mis à niveau la version Vue vers 2.7, cette syntaxe n'était plus prise en charge. Nous devons utiliser useStore composables dans Vuex pour accéder au magasin. Cela ne fonctionne qu'avec Vuex version 4.

Lors de la mise à niveau vers Vuex version 4 sur la version actuelle de Vue, nous voyons l'erreur suivante :

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

Cela est logique puisqu'ils font partie de l'API de composition et ne sont pas disponibles sur la version de Vue que nous utilisons (2.6.14). Mais Vuex version 4 et Vue version 2.7 ne semblent pas non plus fonctionner ensemble.

Lorsque nous exécutons l'application avec Vuex ^4.1.0 和 Vue 2.7.13, nous voyons l'erreur suivante :

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

Comment faire fonctionner Vue 2.7 avec Vuex et l'API de composition ? Plus précisément, comment accéder au stockage Vuex dans les composables sur Vue 2.7 ?