Vue 2.7 und Kombinations-API + Vuex

Question

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üssen useStore Composables 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 和 Vue 2.7.13 ausfü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?

Answer 1

在您的商店中：

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

在任何组件中，包括子组件：

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

如果您有多个商店，请相应地命名商店及其use功能。