【Vue3 第二十七章】路由和状态管理

一、路由

1.1 服务端路由 与 客户端路由

• 服务端路由
  服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。
• 客户端路由
  客户端路由和服务端路由类似，只不过它是在浏览器中运行，使用 JavaScript 处理逻辑，并利用一些基于 JS 的模板引擎或其它方式呈现页面。客户端路由通常用于单页面应用程序中，这时服务器端代码主要用于为客户端代码提供通过 ajax 技术请求的 API 接口数据。
  在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下（这类场景下用户通常会在很长的一段时间中做出多次交互）。
  客户端路由可以通过 History API 或者 hashchange 事件 来管理应用当前应该渲染的视图。

1.2 实现一个简单的路由

如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件。
如下图，通过点击的方式，达到路由切换的目的：

主要代码如下：

<script setup>
import { ref, computed } from 'vue'
import A from './A.vue'
import B from './B.vue'
import NotFound from "./NotFound.vue"

const routes = {
    '/': A,
    '/b': B
}

const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
    currentPath.value = window.location.hash
})
const currentView = computed(() => {
    return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
    <div>
        <div>
            <a href="#/">A</a>
            <a href="#/b" style="margin-left: 20px">B</a>
        </div>
        <br>
        <Transition name="fade">
            <component :is="currentView" style="margin-top:50px" tag="div"></component>
        </Transition>
    </div>
</template>
<style scoped lang="less">
.fade-enter-from {
    opacity: 0;
}

.fade-enter-active {
    transition: opacity 1s 0.5s ease;
}https://code.7-plan.com/web/operation-management

.fade-leave-to {
    opacity: 0;
}

.fade-leave-active {
    transition: opacity .5s ease;
}
</style>

1.3 官方路由库 - Vue Router

Vue Router - 为 Vue.js 提供富有表现力、可配置的、方便的路由

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

• 嵌套路由映射
• 动态路由选择
• 模块化、基于组件的路由配置
• 路由参数、查询、通配符
• 展示由 Vue.js 的过渡系统提供的过渡效果
• 细致的导航控制
• 自动激活 CSS 类的链接
• HTML5 history 模式或 hash 模式
• 可定制的滚动行为
• URL 的正确编码

关于项目路由的详细配置和使用，详见官方文档

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客地址

二、状态管理

2.1 在 Vue 中，每一个组件实例都是一个独立的单元，包含三个部分：

• 状态
  驱动整个应用的数据源

• 视图
  对状态的一种声明式映射

• 交互
  状态根据用户在视图中的输入而做出响应变更的可能方式
  
  当多个组件共享一个共同状态时，可以利用 Vue 提供的 API，在抽取的公共组件上做状态管理：

• props 属性传递（深层次组件嵌套，会造成 prop 逐级透传问题，会显得非常麻烦）
  

• provide/inject 穿透（可以解决深层次数据传递问题）
  

• event 自定义事件

• ref 引用获取父/子实例

• globalProperties 定义全局状态

• eventBus 公交总线

2.2 通过 Vue 响应式 API 实现一个简单的状态管理
创建一个共享组件，并使用 reactive 创建一个响应式状态对象

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0
})

在需要这个状态的组件中分别引入并使用

<!-- ComponentA.vue -->
<script setup>
import { store } from './store.js'
</script>

<template>From A: {{ store.count }}</template>

<!-- ComponentB.vue -->
<script setup>
import { store } from './store.js'
</script>

<template>From B: {{ store.count }}</template>

在这两个组件中，尝试去修改 store 对象，看一下视图是否会自动更新

<template>
  <button @click="store.count++">
    From B: {{ store.count }}
  </button>
</template>

刷新页面，发现点击操作后，两个引用的组件中，这个状态都同步更新了。
然而，我们学习JS高级或者设计模式的时候，再三强调不建议这么做！为什么，想一想，随意一个组件都可以轻易的去修改状态，这符合代码的健壮性和可维护性原则吗？
所以为了确保状态改变的逻辑像状态本身一样集中，建议在 store 上，通过方法的方式来表达修改状态的意图，提供对应的接口去进行响应的操作，而不是随意修改。

共享组件代码增加操作接口函数如下

// store.js
import { reactive } from 'vue'

export const store = reactive({
  count: 0,
  increment() {
    this.count++
  }
})

其它组件中通过对应的接口，完成状态的处理操作

<template>
  <button @click="store.increment()">
    From B: {{ store.count }}
  </button>
</template>

请注意这里点击的处理函数使用了 store.increment()，带上了圆括号作为内联表达式调用，因为它并不是组件的方法，并且必须要以正确的 this 上下文来调用。

2.3 通过上面不难看出，Vue 组件本身其实已经实现了对响应式状态的管理。那既然这样，为什么我们还要使用 Pinia 或 Vuex 这些状态管理器呢？
这是因为在大规模的生产应用中，还有很多其它事项要考虑：

• 更强的团队协作约定
• 与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试
• 模块热更新 (HMR)
• 服务端渲染支持

下面来展开讲一讲状态管理的应用

Pinia - 符合直觉的 Vue.js 状态管理库。类型安全、可扩展性以及模块化设计。甚至让你忘记正在使用的是一个状态库。