typescript - 如何在 Vue 3 SSR 应用程序的路由器中使用 vuex 商店?
问题描述
我有一个带有 SSR、Vue-Cli、Vuex 和 Typescript 的 Vue3 项目。
在路由器页面中,我需要将数据提交到 Vuex Store。在 .vue 文件中,我只需使用在 vuex.d.ts 中输入的 this.$store,例如:
this.$store.commit("setFoo", "Bar")
但是我如何从没有 this 或 vue 实例的 ts 文件(router/index.ts)中做到这一点。
我尝试导入存储索引文件并提交:
import store from "@/store/index"
store.commit("setFoo", "Bar")
但我得到一个错误
类型 '() => Store<{ foo: string; 上不存在属性 'commit' }>'.ts(2339)
商店文件(因为我正在运行 SSR,所以商店不能是单例):
import Vuex from "vuex"
export default function () {
return new Vuex.Store({
state: () => ({
foo: "foo",
}),
mutations: {
setFoo(state, payload) {
state.foo = payload
},
},
})
}
更新了 vuex 4 的存储文件:
import { createStore } from "vuex"
const store = {
state: () => ({
foo: "foo",
})
}
export default function () {
return createStore(store)
}
入口-client.js:
import createApp from "./main"
const { app, router } = createApp()
router.isReady().then(() => {
app.mount("#app", true)
})
入口-server.ts:
import createApp from "./main"
export default function () {
const { app, router } = createApp()
return {
app,
router,
}
}
主.js:
import { createSSRApp, createApp, h } from "vue"
import { isSSR } from "@/helpers"
import createRouter from "@/router"
import createStore from "@/store"
import axios from "axios"
import VueAxios from "vue-axios"
import App from "@/App.vue"
export default function () {
const rootComponent = {
render: () => h(App),
components: { App },
}
const app = (isSSR() ? createSSRApp : createApp)(rootComponent)
const router = createRouter()
const store = createStore()
app.use(VueAxios, axios)
app.use(router)
app.use(store)
app.provide("axios", app.config.globalProperties.axios)
return {
app,
router,
store,
}
}
路由器/index.ts:
import { createRouter, createWebHistory, createMemoryHistory } from "vue-router"
import store from "@/store/index"
import axios from "axios"
import MockAdapter from "axios-mock-adapter"
import { routes } from "./routes"
import { isSSR } from "@/helpers"
const history = isSSR()
? createMemoryHistory()
: createWebHistory(process.env.BASE_URL)
const router = createRouter({ routes, history })
router.beforeEach(async (to, from, next) => {
// do stuff with store
})
export default function () {
return router
}
包.json:
"scripts": {
"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 --mode development --dest dist/server",
"serve:client": "vue-cli-service serve",
"serve:server": "node ./dist/server/server.js",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/server-renderer": "^3.2.4",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"express": "^4.17.1",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@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",
"prettier": "^2.2.1",
"sass-loader": "^8.0.2",
"typescript": "~4.1.5",
"webpack-manifest-plugin": "^4.0.2",
"webpack-node-externals": "^3.0.0"
}
解决方案
请注意,避免有状态的单例规则不仅适用于主应用程序实例和商店,还适用于路由器
您的当前Router/index.ts
创建有状态的单例。相反,您需要创建一个“路由器工厂”功能,以便每个服务器请求都获得新的路由器实例。额外的好处是现在您可以将商店实例传递给它
Router/index.ts
import { createRouter, createWebHistory, createMemoryHistory } from "vue-router"
import axios from "axios"
import MockAdapter from "axios-mock-adapter"
import { routes } from "./routes"
import { isSSR } from "@/helpers"
const createHistory = isSSR()
? createMemoryHistory
: createWebHistory
export default function (store) {
const router = createRouter({
routes,
history: createHistory(process.env.BASE_URL)
})
router.beforeEach(async (to, from, next) => {
// do stuff with store (store comes from argument)
})
return router
}
请注意,服务器和客户端包都应该使用createSSRApp
-如果您使用标准createApp
,客户端水合将不起作用
Vue 提供了
createSSRApp
一种在客户端代码中使用的方法来告诉 Vue 水合现有的静态 HTML,而不是重新创建所有 DOM 元素
main.js
import { createSSRApp, h } from "vue"
import { isSSR } from "@/helpers"
import createRouter from "@/router"
import createStore from "@/store"
import axios from "axios"
import VueAxios from "vue-axios"
import App from "@/App.vue"
export default function () {
const rootComponent = {
render: () => h(App),
components: { App },
}
const app = createSSRApp(rootComponent)
const store = createStore()
const router = createRouter(store)
app.use(VueAxios, axios)
app.use(router)
app.use(store)
app.provide("axios", app.config.globalProperties.axios)
return {
app,
router,
store,
}
}
推荐阅读
- reactjs - 在 TreeView 中设置选定 TreeItem 的样式
- python - Pandas:如果最后一个非零值 < 0:替换为 0
- python - 交叉引用 postgresql 删除
- javascript - 在 node.js 中使用 readline native 获取用户输入的问题
- android - 适用于 Appcelerator Titanium 应用程序的 Android 上的强制灯光主题
- .net - TargetFrameworks 不适用于 VS 2019 16.6.2
- javascript - 如何使用 next.js 指定子样式?
- node.js - aws - 弹性 beanstalk - eb 部署在环境重建后不运行节点脚本服务器
- javascript - 使用递归在Javascript中对整数数组求和
- go - 如何获取完整的设备名称