Wir versuchen, eine Vue 2-Anwendung auf Vue 2.7 zu migrieren, stoßen jedoch auf einige Probleme bei der Kombination der API und Vuex.

In unserer aktuellen Anwendung verwenden wir das@vue/composition-api-Paket, um die Verwendung zusammensetzbarer Elemente zu ermöglichen. Innerhalb dieser Composables müssen wir auf den Store zugreifen und ihn wie folgt abrufen:

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

Als wir jedoch die Vue-Version auf 2.7 aktualisierten, wurde diese Syntax nicht mehr unterstützt. Wir müssenuseStoreComposables in Vuex verwenden, um auf den Store zuzugreifen. Dies funktioniert nur mit Vuex Version 4.

Beim Upgrade auf Vuex Version 4 auf der aktuellen Version von Vue wird der folgende Fehler angezeigt:

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

Dies ist sinnvoll, da sie Teil der Kompositions-API sind und in der von uns verwendeten Vue-Version (2.6.14) nicht verfügbar sind. Aber auch Vuex Version 4 und Vue Version 2.7 scheinen nicht zusammenzuarbeiten.

Wenn wir die Anwendung mit Vuex^4.1.0和 Vue2.7.13ausführen, sehen wir den folgenden Fehler:

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

Wie sorgen wir dafür, dass Vue 2.7 mit Vuex und der Kompositions-API funktioniert? Wie greifen wir konkret auf den Vuex-Speicher in Composables in Vue 2.7 zu?