Vue 3 SSR アプリケーションのルーターに vuex ストアを統合するにはどうすればよいですか?-PHP中国語ネットワークQ&A

SSR、Vue-Cli、Vuex、Typescript を使用した Vue3 プロジェクトがあります。 ルーティングページで、Vuex ストアにデータを送信する必要があります。 .vue ファイルでは、次のように vuex.d.ts で型定義されている this.$store を単純に使用できます。 <pre class="brush:php;toolbar:false;">this.$store.commit("setFoo", "Bar")</pre> しかし、これまたは vue インスタンスを使用せずに、ts ファイル (router/index.ts) でこれを行うにはどうすればよいでしょうか? ストアインデックスファイルをインポートして送信しようとしました: <pre class="brush:php;toolbar:false;">「@/store/index」からストアをインポート store.commit("setFoo", "Bar")</pre> しかし、エラーが発生しました: <ブロック引用> プロパティ 'commit' はタイプ '() => Store<{ foo: string; }>' には存在しません。ts(2339)

</blockquote> ストアファイル (SSR を実行しているため、ストアをシングルトンにすることはできません): <pre class="brush:php;toolbar:false;">「vuex」から Vuex をインポートデフォルト関数をエクスポート () { return new Vuex.Store({ 状態: () => ({ フー: "フー"、 })、突然変異: { setFoo(状態, ペイロード) { state.foo = ペイロード }、 }、 }) }</pre> 更新された vuex 4 ストアファイル: <pre class="brush:php;toolbar:false;">import { createStore } from "vuex" const ストア = { 状態: () => ({ フー: "フー"、 }) } デフォルト関数をエクスポート () { createStore(ストア)を返す }</pre> entry-client.js: <pre class="brush:php;toolbar:false;">createApp を "./main" からインポート const {アプリ、ルーター} = createApp() router.isReady().then(() => { app.mount("#app", true) })</pre> ポータルサーバー.ts: <pre class="brush:php;toolbar:false;">createApp を "./main" からインポートデフォルト関数をエクスポート () { const {アプリ、ルーター} = createApp() 戻る { アプリ、ルーター、 } }</pre> main.js: <pre class="brush:php;toolbar:false;">import { createSSRApp, createApp, h } from "vue" import { isSSR } から "@/helpers" 「@/router」から createRouter をインポートします「@/store」から createStore をインポート「axios」から axios をインポートします「vue-axios」から VueAxios をインポートします「@/App.vue」からアプリをインポートデフォルト関数をエクスポート () { const rootComponent = { レンダリング: () => h(アプリ)、コンポーネント: {アプリ}、 } const app = (isSSR() ? createSSRApp : createApp)(rootComponent) const ルーター = createRouter() const ストア = createStore() app.use(VueAxios, axios) app.use(ルーター) app.use(ストア) app.provide("axios", app.config.globalProperties.axios) 戻る { アプリ、ルーター、店、 } }</pre> router/index.ts: <pre class="brush:php;toolbar:false;">import { createRouter, createWebHistory, createMemoryHistory } from "vue-router" 「@/store/index」からストアをインポートします「axios」から axios をインポートします「axios-mock-adapter」から MockAdapter をインポートします import { ルート } から "./routes" import { isSSR } から "@/helpers" const 履歴 = isSSR() ?createMemoryHistory() : createWebHistory(process.env.BASE_URL) const router = createRouter({ ルート, 履歴 }) router.beforeEach(async (to、from、next) => { // ストアで何かを行う }) デフォルト関数をエクスポート () { リターンルーター }</pre> 包.json： <pre class="brush:php;toolbar:false;">"スクリプト": { "build:all": "npm run build:client && npm run build:server", "build:client": "vue-cli-service build --dest dist/client", "build:server": "export SSR=1 || set SSR=1&& vue-cli-service build --dest dist/server", "build:server:dev": "export SSR=1 || set SSR=1&& vue-cli-service build --modedevelopment --dest dist/server", "serve:client": "vue-cli-service サーブ", "serve:server": "ノード ./dist/server/server.js", "lint": "vue-cli-service lint" }、 "依存関係": { "@vue/server-renderer": "^3.2.4", "axios": "^0.21.1", "core-js": "^3.6.5", "エクスプレス": "^4.17.1", "vue": "^3.0.0", "vue-axios": "^3.2.5", "vue-router": "^4.0.0-0", "vuex": "^4.0.0-0" }、 "devDependency": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "^5.0.0-beta.3", "@vue/cli-plugin-eslint": "^5.0.0-beta.3", "@vue/cli-plugin-router": "^5.0.0-beta.3", "@vue/cli-plugin-typescript": "^5.0.0-beta.3", "@vue/cli-plugin-vuex": "^5.0.0-beta.3", "@vue/cli-service": "^5.0.0-beta.3", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^7.0.0", "axios-mock-adapter": "^1.20.0", "eslint": "^7.20.0", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-vue": "^7.6.0", "node-sass": "^4.12.0", "よりきれい": "^2.2.1", "sass-loader": "^8.0.2", "typescript": "~4.1.5", "webpack-manifest-plugin": "^4.0.2", "webpack-node-externals": "^3.0.0" }</pre>