- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个包含 SSR、Vue-Cli、Vuex 和 Typescript 的 Vue3 项目。
在路由器页面中,我需要将数据提交到 Vuex Store。在 .vue 文件中,我只使用 this.$store ,它在 vuex.d.ts 中输入,例如:
this.$store.commit("setFoo", "Bar")
但是我如何从没有 this 或 vue 实例的 ts 文件 (router/index.ts) 中做到这一点。
我已经尝试导入商店索引文件并提交:
import store from "@/store/index"
store.commit("setFoo", "Bar")
但是我得到一个错误
Property 'commit' does not exist on type '() => Store<{ foo: string; }>'.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)
}
入口客户端.js:
import createApp from "./main"
const { app, router } = createApp()
router.isReady().then(() => {
app.mount("#app", true)
})
入口服务器.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
}
Package.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"
}
最佳答案
请注意 Avoid Stateful Singletons规则不仅适用于主应用程序实例和商店,而且 also to a router
您当前的 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
}
注意 both server and client bundle should use createSSRApp
- 如果您使用标准的 createApp
,client side hydration不会工作
Vue provides a
createSSRApp
method for use in client-side code to tell Vue to hydrate the existing static HTML instead of re-creating all the DOM elements
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,
}
}
关于typescript - 如何在 Vue 3 SSR 应用程序的路由器中使用 vuex 存储?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68993708/
使用 ui-router-ng2 有哪些优点和缺点?而不是新的 Angular2 路由器?过去我使用 ui-router 和 Angular 1.x 而不是使用 ngRoute,因为我需要更好地支持嵌
本文主要记录个人对小米 WR30U 路由器的解锁和刷机过程,整体步骤与 一般安装流程 类似,但是由于 WR30U 的解锁 ssh 和刷机的过程中有一些细节需要注意,因此记录一下 解锁
我有路由器 { path: 'reset-password', component: ResetPasswordComponent, } 我希望能够将其作为直接链接 (/reset-passw
所以,我试图制作一个具有 Backbone 的示例应用程序,但我无法使路由器工作,对此有什么想法吗?谢谢。这是我的路由器 var Workspace = Backbone.Router.extend(
我正在研究分布式应用程序。网络基于ZMQ(jeromq),这是我的架构: N Clients (Dealer socket) (Router) Proxy (Dealer) 1 (Dealer)
In this plunk我有一个 ui-router $state.goto这仅在第一次有效,即使我增加了 seq变量以强制重新加载。看到时间戳没有改变。这段代码有什么问题? HTML G
我有面包屑组件,测试如下。测试应覆盖75%以上。测试失败,因为 ActivatedRoute.root.children 未定义。谁知道我该如何定义它?我需要至少一个 children 作为 root
我正在使用 RC5 和 "@angular/router": "3.0.0-rc.1" 我似乎无法捕捉到旧路线(示例): /category/subcategory/subcategory/artic
我确实有一个延迟加载模块,当我转到 /lazy 时默认加载 LazyLoadedComponent。到目前为止,没问题。 此组件包含 2 个路由器 socket : 模块有以下路由: const
我试图用不同的参数路由到当前页面,但没有成功。我有一个触发的组合框: this.router.navigate(['page', selectedId]); Url 正在更改,仅此而已。 如何使用不同
我正在尝试使用 React 路由器构建 SPA。当我使用链接导航时,它工作得很好,但是刷新或写入 url 时,它给我 cannot GET/(any route except main)。我试图将 h
我无法在我的 app.js 文件中添加样式。 div 在路线内不起作用。有没有其他方法可以在路由中添加样式? : } /> } /> }> } />
根据用户角色在 react-router 中有条件地呈现路由的最佳方法是什么。我有一个案例,并非所有角色都有权查看某些路线。而且我还需要处理子路线。因此,如果主要路线之一类似于/posts,我只希望
我想使用 Flash 的 RTMFP 对等协议(protocol),但我想知道它是否值得为主流受众开发?据我了解,它使用 UDP,除非用户的防火墙/路由器配置正确,否则它变得毫无用处。 这个问题有解决
我有一 strip 有 waitOn 的路线返回 Meteor.subscribe 的钩子(Hook).每次触发路线时,我都会从我的 loadingTemplate 中看到微调器在看到实际数据之前简要
所以我最近开始尝试使用 createMemoryHistory,因为我正在构建一个将在 iframe 中呈现的应用程序。幸运的是,单击 UI 按钮,我可以在不修改 url 的情况下四处导航。但是,当我
我在我的 React redux 应用程序中使用 connected-react-router。我需要服务器端渲染和客户端渲染(我通过 limenius react bundle 在 symfony
我是一名 ios 开发人员,并试图找出 viper 架构中的路由器和 coordinator 之间的区别。 我真的找不到明确的答案是协调器只是被认为是一种模式,所以路由器毕竟只是某种协调器还是它们有不
我想要这样的东西: if ($state.get("^")) $state.go("^"); else $location.path('/'); 但它显然不起作用(即使没有父状态,它也总是与 $sta
当我从 react-router-dom 使用 BrowserRouter 时,我的路由正在工作。但是为了使用自定义历史记录,我用来自 react-router 的 Router 替换了 Browse
我是一名优秀的程序员,十分优秀!