成都网站建设 四川冠辰网站建设,迈诺网站建设,电子商务网站建设书,东营市建设客户端 vs. 服务端路由
服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时#xff0c;浏览器会从服务端获得全新的 HTML#xff0c;然后重新加载整个页面。
然而#xff0c;在单页面应用中浏览器会从服务端获得全新的 HTML然后重新加载整个页面。
然而在单页面应用中客户端的 JavaScript 可以拦截页面的跳转请求动态获取新的数据然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验尤其是在更偏向“应用”的场景下因为这类场景下用户通常会在很长的一段时间中做出多次交互。
在这类单页应用中“路由”是在客户端执行的。一个客户端路由器的职责就是利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图。
官方路由
Vue Router https://router.vuejs.org/zh/
状态管理
什么是状态管理
理论上来说每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例
script setup
import { ref } from vue// 状态
const count ref(0)// 动作
function increment() {count.value
}
/script!-- 视图 --
template{{ count }}/template它是一个独立的单元由以下几个部分组成
状态驱动整个应用的数据源
视图对状态的一种声明式映射
交互状态根据用户在视图中的输入而作出相应变更的可能方式。
下面是“单向数据流”这一概念的简单图示 然而当我们有多个组件共享一个共同的状态时就没有这么简单了 多个视图可能都依赖于同一份状态。 来自不同视图的交互也可能需要更改同一份状态。
对于情景 1一个可行的办法是将共享状态“提升”到共同的祖先组件上去再通过 props 传递下来。然而在深层次的组件树结构中这么做的话很快就会使得代码变得繁琐冗长。这会导致另一个问题Prop 逐级透传问题。
对于情景 2我们经常发现自己会直接通过模板引用获取父/子实例或者通过触发的事件尝试改变和同步多个状态的副本。但这些模式的健壮性都不甚理想很容易就会导致代码难以维护。
一个更简单直接的解决方案是抽取出组件间的共享状态放在一个全局单例中来管理。这样我们的组件树就变成了一个大的“视图”而任何位置上的组件都可以访问其中的状态或触发动作。
用响应式 API 做简单状态管理
如果你有一部分状态需要在多个组件实例间共享你可以使用 reactive() 来创建一个响应式对象并将它导入到多个组件中
// store.js
import { reactive } from vueexport const store reactive({count: 0
})!-- ComponentA.vue --
script setup
import { store } from ./store.js
/scripttemplateFrom A: {{ store.count }}/template!-- ComponentB.vue --
script setup
import { store } from ./store.js
/scripttemplateFrom B: {{ store.count }}/template现在每当 store 对象被更改时ComponentA 与 ComponentB 都会自动更新它们的视图。现在我们有了单一的数据源。
然而这也意味着任意一个导入了 store 的组件都可以随意修改它的状态
templatebutton clickstore.countFrom B: {{ store.count }}/button
/template虽然这在简单的情况下是可行的但从长远来看可以被任何组件任意改变的全局状态是不太容易维护的。为了确保改变状态的逻辑像状态本身一样集中建议在 store 上定义方法方法的名称应该要能表达出行动的意图
// store.js
import { reactive } from vueexport const store reactive({count: 0,increment() {this.count}
})templatebutton clickstore.increment()From B: {{ store.count }}/button
/template请注意这里点击的处理函数使用了 store.increment()带上了圆括号作为内联表达式调用因为它并不是组件的方法并且必须要以正确的 this 上下文来调用。 除了我们这里用到的单个响应式对象作为一个 store 之外你还可以使用其他响应式 API 例如 ref() 或是 computed()或是甚至通过一个组合式函数来返回一个全局状态
import { ref } from vue// 全局状态创建在模块作用域下
const globalCount ref(1)export function useCount() {// 局部状态每个组件都会创建const localCount ref(1)return {globalCount,localCount}
}事实上Vue 的响应性系统与组件层是解耦的这使得它非常灵活。
Pinia 推荐
虽然我们的手动状态管理解决方案在简单的场景中已经足够了但是在大规模的生产应用中还有很多其他事项需要考虑 更强的团队协作约定 与 Vue DevTools 集成包括时间轴、组件内部审查和时间旅行调试 模块热更新 (HMR) 服务端渲染支持
Pinia(https://pinia.vuejs.org/zh/) 就是一个实现了上述需求的状态管理库由 Vue 核心团队维护对 Vue 2 和 Vue 3 都可用。
现有用户可能对 Vuex 更熟悉它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好因此 Vuex 现在处于维护模式。它仍然可以工作但不再接受新的功能。对于新的应用建议使用 Pinia。
事实上Pinia 最初正是为了探索 Vuex 的下一个版本而开发的因此整合了核心团队关于 Vuex 5 的许多想法。最终我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容因此决定将其作为新的官方推荐。
相比于 VuexPinia 提供了更简洁直接的 API并提供了组合式风格的 API最重要的是在使用 TypeScript 时它提供了更完善的类型推导。
