Vue 生态中路由与状态管理的变迁：Vue-Router、Vuex 及 Pinia 解析

Vue-Router 有哪些变化?

引入方式变化, routes 属性加入强制判断

如果页面上没有对应的命名式路由, 如果像推送到路由上去, 原先的做法会默认导航到默认路径 (‘/’)

现在 4.x 以上版本不会有这个行为, 而是去加载一个空的组件, 且在控制台抛出异常

不会再给默认路径添加 /, redirect重定向需要写全路径

// router/index.js
// Vue2 的配置方法, 的情况下, path: '', 会在 about 前面加 /
// 比如访问 www.baodu.com/#/path 会默认转到 www.baodu.com/#/path/about
// 但是, 在 Vue3 以后就不会默认加 /
{
    path: "/path",
    name: "Home",
    component: HomeView,
    children: [
      { path: "", redirect: "about" }, // vue2 -> /path/about
      { path: "about", component: About1 },
    ],
}
// Vue3 的配置
// 写全路径后, 访问 www.baodu.com/#/path 会默认转到 www.baodu.com/#/path/about
// 只写 about 就只会跳到 about, 访问 www.baodu.com/#/path 会默认转到 www.baodu.com/#/about
{
    path: "/path",
    name: "Home",
    component: HomeView,
    children: [
      { path: "", redirect: "/path/about" }, 
      { path: "about", component: About1 },
    ],
}

动态路由匹配针对 (*) 需要使用 pathMatch 属性

// 当访问不到页面时, 会默认跳到 NotFount 组件
{
    path: "/:pathMatch(.*)",
    name: "not-found",
    component: NotFound,
},

Vuex 的有哪些变化?

使用 createStore 方法创建 Store 实例

import { createStore } from "vuex"
export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

在 Setup 方法中使用 useStore 来引用 Store 对象

// 第一种方法


// 第二种方法

createLogger 单独抽离, 其他用法保持 Options API 一致

import { createStore, createLogger } from "vuex";

const debug = process.env.NODE_ENV !== "production";

export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: debug ? [createLogger()] : [],
});

新一代的状态管理工具 Pinia

状态管理解决的问题

• 数据传递: 跨组件的状态 (数据) 传递与视图更新
• 逻辑解耦: 异步事件与数据的统一处理

Vuex 相关知识回顾

Vue2 中 Vuex 的使用

<!-- vuex的基本使用 -->
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 注册
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutaition: {
		increment (state) {
			state.count++
		}
	}
})

// 使用
store.commit('increment')

console.log(store.state.count) // -> 1

Vue3 中 Vuex 的使用

// Vue3 采用了函数式编程
import { createApp } from 'vue'
import { createStore } from 'vuex'

// 写法变化了
const store = createStore({
	state () {
		return {
			count: 0
		}
	},
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

const app = createApp({ /* your root component */ })

// 全局注册
app.use(store)

Vuex、Pinia、原生 三种实现状态管理的方法

为什么有 Pinia ?

• Vuex 进入维护阶段, 可能没有新的特性加入
• Pinia 概念更简、写法更简, 更像下一代的 Vuex5
• 更贴合组合式 API 写法, TS 重写, 对 IDE 友好

Vue2 与 Vue3 中 Vuex 使用的变化

// store.ts
import { createStore } from "vuex";

export default createStore({
  state: {
    count: 0,
  },
  getters: {},
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  actions: {},
  modules: {},
});

Pinia 的基本使用

// counter.ts
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

原生写法 (依赖注入)

定义数据和方法 (reactive) -> App.vue 主页面引入数据 (provide) -> 子组件使用数据 (inject)

// 原生使用 reactive 定义数据, 操作方法 (counter.ts)
import { reactive } from "vue";

export const useCounterOriginStore = reactive({ // 定义数据 和 方法
  count: 0,
  increment() {
    this.count++;
  },
});

Vuex vs Pinia vs 原生 (总结)

• Vuex -> Options + Componsition API, 概念比较多 (Vue2 的项目就使用 Vuex 即可)
• Pinia 用法简单, 高效, 概念比较少 (Vue3 的项目就直接上手 Pinia)
• 原生通过 Provide/inject + reactive 也可以实现简单状态管理

Pinia 核心概念

概念 (日常开发, 主要使用前面三个)

• State 状态, 定义一些数据, 接受一个箭头函数
• Actions 触发的一些事件
• Getters 计算属性
• Plugins 对整个 Pinia 生命周期的管理

进阶用法

• mapState
• mapActions
• mapGetters

API

• $patch
• $reset
• $state
• $subscribe
• $onAction