Vue 3 SSR アプリケーションのルーターに vuex ストアを統合するにはどうすればよいですか?

Question

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

</blockquote> <p>ストア ファイル (SSR を実行しているため、ストアをシングルトンにすることはできません): </p> <pre class="brush:php;toolbar:false;">「vuex」から Vuex をインポート デフォルト関数をエクスポート () { return new Vuex.Store({ 状態: () => ({ フー: "フー"、 })、 突然変異: { setFoo(状態, ペイロード) { state.foo = ペイロード }、 }、 }) }</pre> <p>更新された vuex 4 ストア ファイル: </p> <pre class="brush:php;toolbar:false;">import { createStore } from "vuex" const ストア = { 状態: () => ({ フー: "フー"、 }) } デフォルト関数をエクスポート () { createStore(ストア)を返す }</pre> <p>entry-client.js:</p> <pre class="brush:php;toolbar:false;">createApp を "./main" からインポート const {アプリ、ルーター} = createApp() router.isReady().then(() => { app.mount("#app", true) })</pre> <p>ポータルサーバー.ts:</p> <pre class="brush:php;toolbar:false;">createApp を "./main" からインポート デフォルト関数をエクスポート () { const {アプリ、ルーター} = createApp() 戻る { アプリ、 ルーター、 } }</pre> <p>main.js:</p> <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> <p>router/index.ts:</p> <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> <p>包.json：</p> <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>

Answer 1

デフォルトのエクスポートは関数です

デフォルト関数のエクスポート () {

あなたがやりたいことはこれだと思います:

デフォルトの新しい Vuex.Store({...})をエクスポートします

これを関数として保持したい場合は、 store().commit を試すこともできますが、これにより、store() が呼び出されるたびに新しい Vuex インスタンスが作成されます

Answer 2

次の点に注意してください ステートフル シングルトンの使用は避けてください このルールは、メイン アプリケーション インスタンスとストレージだけでなく、 ルーターにも適用されます

現在の Router/index.ts はステートフル シングルトンを作成します。すべてのサーバー要求が新しいルーター インスタンスを取得できるように、「ルーター ファクトリ」関数を作成する必要があります。もう 1 つの利点は、ストレージ インスタンスをそれに渡すことができることです

ルーター/index.ts

リーリー

サーバー バンドルとクライアント バンドルの両方で 、 createSSRApp を使用する必要があることに注意してください - 標準の createApp, クライアントを使用する場合水分補給正しく機能しません

main.js

リーリー