Vue 2.7 et combinaison API + Vuex

Question

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 ?

Answer 1

Dans votre magasin :

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

Dans n'importe quel composant, y compris les sous-composants :

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

Si vous avez plusieurs magasins, nommez-les et leurs usefonctionnalités en conséquence.