Vue 2.7 dan API Gabungan + Vuex

Question

Kami cuba memindahkan aplikasi Vue 2 ke Vue 2.7 tetapi menghadapi beberapa isu yang menggabungkan API dan Vuex.

Dalam aplikasi semasa kami, kami menggunakan pakej @vue/composition-api untuk membolehkan kami menggunakan item boleh gubah. Dalam kompos ini kita perlu mengakses kedai dan mendapatkannya seperti ini:

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

Namun, apabila kami menaik taraf versi Vue kepada 2.7, sintaks ini tidak lagi disokong. Kita perlu menggunakan useStore kompos dalam Vuex untuk mengakses kedai. Ini hanya berfungsi dengan Vuex versi 4.

Apabila menaik taraf kepada Vuex versi 4 pada versi semasa Vue, kami melihat ralat berikut:

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

Ini masuk akal kerana ia adalah sebahagian daripada API komposisi dan tidak tersedia pada versi Vue yang kami gunakan (2.6.14). Tetapi Vuex versi 4 dan Vue versi 2.7 nampaknya juga tidak berfungsi bersama.

Apabila kami menjalankan aplikasi menggunakan Vuex ^4.1.0 和 Vue 2.7.13 kami melihat ralat berikut:

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

Bagaimana kita membuat Vue 2.7 berfungsi dengan Vuex dan API komposisi? Secara khusus, bagaimanakah kita boleh mengakses storan Vuex dalam kompos pada Vue 2.7?

Answer 1

Di kedai anda:

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

Dalam mana-mana komponen, termasuk subkomponen:

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

Jika anda mempunyai berbilang kedai, namakan kedai dan usecirinya dengan sewajarnya.