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