Codes►前端

状态管理

VueX和pinia

VueX

store index. js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createStore } from 'vuex'
// VueX 数据管理框架
// VueX 创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: { name: 'dell' },
  // mutation 里面只允许写同步代码，不允许写异步代码
  // commit 和 mutation 做关联
  mutations: {
    change(state, str) {
      state.name = str;
    }
  },
  // dispatch 和 actions 做关联
  actions: {
    // change(store, str) {
    //   setTimeout(() => {
    //     store.commit('change', str)
    //   }, 2000)
    // }
  }
})

流程

1
2
3
4
5
6
7
handleClick() {
      // 1. dispatch 方法，派发一个 action，名字叫做change
      // 2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法
      // 3. commit 提交一个叫做 change 的数据改变
      // 4. mutation 感知到提交的change改变，执行 change 方法改变数据
      this.$store.commit('change', 'hello world');
    }
1
2
3
4
5
6
import { createStore } from 'vuex'
export default createStore({
  state: { name: 'dell' },
  mutations: {},
  actions: {}
})

区别

VueX和Pinia都是Vue应用的状态管理库，但它们之间存在一些关键的区别：

  1. 设计理念：
    • VueX：VueX是一个集中式存储管理应用所有组件的状态的库，采用单向数据流，状态变更需要通过mutation，异步操作通过action提交mutation。
    • Pinia：Pinia是Vue.js的官方状态管理库Vuex的精神继承者，提供了更简单的API，更好的TypeScript支持，以及更现代化的开发体验。
  2. API设计：
    • VueX：需要通过mutation修改状态，通过commit调用mutation，通过dispatch调用action，模块需要显式注册。
    • Pinia：可以直接修改状态，直接调用action方法，更接近组合式API的风格，Store自动注册。
  3. TypeScript支持：
    • VueX：需要大量类型声明，复杂的模块类型推导，getter和mutation的类型支持较弱。
    • Pinia：提供完整的类型推导，更少的类型声明，更好的IDE支持。
  4. 性能表现：
    • VueX：在处理大型应用时性能稳健，但可能因为配置和模板代码造成性能开销。
    • Pinia：轻量级设计和对Vue 3的深度优化，处理响应式数据时更高效，特别是使用Composition API时。
  5. 社区与生态支持：
    • VueX：作为官方库，拥有广泛的社区支持和丰富的生态系统。
    • Pinia：社区正在快速增长，生态系统也在不断完善，许多开发者开始为其编写插件和工具。
  6. 模块化设计：
    • VueX：支持模块化，但需要通过modules配置来组织不同状态域。
    • Pinia：每个Store作为独立实体，自然支持模块化，无需复杂的模块嵌套。
  7. 版本适应性：
    • VueX：保持向后兼容性，支持Vue 2和Vue 3。
    • Pinia：专为Vue 3量身打造，充分利用Vue 3的最新特性和优化。
  8. 打包体积：
    • Pinia：体积非常小，只有1KB左右，适合追求高性能和快速加载的应用。
      总的来说，Pinia以其轻量级、简单易用、模块化、响应式、TypeScript支持、插件系统、与Vue.js生态系统无缝集成等特点，成为了前端开发中一个高效且强大的状态管理解决方案，尤其适合Vue 3项目。而VueX则继续为Vue 2及Vue 3的用户提供可靠支持，适用于不同场景和需求。

Pinia

使用Pinia作为状态管理库的好处主要包括：

  1. 轻量级与简单易用：Pinia是一个轻量级的库，其API设计简洁明了，易于上手和使用。
  2. 模块化状态管理：Pinia支持将状态划分为不同的模块（stores），每个模块拥有自己的状态、actions和getters，提高了代码的可维护性和可扩展性。
  3. 状态订阅与响应式：开发者可以订阅状态的变化，并在状态发生改变时触发相应的回调函数。Pinia利用Vue.js内置的响应式系统，确保状态的变化能够自动反映在UI上。
  4. TypeScript支持：Pinia从设计之初就原生支持TypeScript，提供了更好的类型推导和类型检查的支持，使得在编写类型安全的代码时更加容易。
  5. 插件系统：Pinia提供了一个插件系统，允许开发者通过插件来扩展其功能或改变其行为，例如添加中间件、持久化存储、调试工具等。
  6. 与Vue 3的整合：Pinia能够与Vue 3的组合式API无缝集成，使得状态管理代码更加清晰和模块化。
  7. 热更新支持：Pinia支持热更新（HMR），使得在开发环境下对状态管理代码的修改可以直接生效，无需刷新页面。
  8. 支持Vue DevTools：Pinia支持Vue DevTools，允许开发者在浏览器中直接查看和调试Vue应用程序的状态。
  9. 跨组件状态共享：在Vue应用程序中，经常需要在多个组件之间共享状态。Pinia提供了一个集中的位置来存储和管理这些状态，使得跨组件的状态共享变得简单直接。
  10. 状态集中管理：Pinia允许开发者将应用程序的状态存储在一个集中的位置，并通过Vue组件进行访问和修改。这种集中管理的方式有助于减少组件之间的直接依赖，提高代码的可维护性和可扩展性。
  11. 异步操作处理：Pinia支持在actions中执行异步操作，如发送网络请求、处理副作用等。这使得Pinia能够处理更复杂的逻辑，如用户登录、数据加载等场景。
  12. 动态状态加载：Pinia支持根据需要动态地加载状态，从而优化了应用程序的初始加载速度。
  13. 体积小：Pinia的体积非常小，只有1KB左右，适合追求高性能和快速加载的应用。
    这些优点使得Pinia成为现代Vue开发中一个高效且强大的状态管理解决方案。

pinia 实例

Pinia 是 Vue 3 的官方状态管理库，用于在组件之间共享和管理状态。它比 Vuex 更简洁、更灵活，且与 Vue 3 的 Composition API 完美集成。以下是一个简单的 Pinia 实例，展示如何在 Vue 3 项目中使用 Pinia 来管理状态。

1. 安装 Pinia

在 Vue 3 项目中，可以通过以下命令安装 Pinia：

1
npm install pinia

2. 设置 Pinia

在项目的 src 目录下，创建一个 stores 文件夹，并在其中创建一个 counter.js 文件，用于定义一个简单的状态存储。

src/stores/counter.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  // 定义状态
  state: () => ({
    count: 0,
  }),
  // 定义计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // 定义操作方法
  actions: {
    increment() {
      this.count += 1;
    },
    decrement() {
      this.count -= 1;
    },
  },
});

3. 在 Vue 应用中使用 Pinia

在项目的入口文件（如 main.js 或 main.ts）中安装 Pinia 插件。

src/main.js

1
2
3
4
5
6
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia).mount('#app');

4. 在组件中使用 Pinia 状态

在 Vue 组件中，可以通过 useStore 方法引入并使用 Pinia 状态。

src/components/Counter.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>
<script>
import { useCounterStore } from '../stores/counter';
export default {
  setup() {
    // 使用 Pinia store
    const store = useCounterStore();
    // 访问状态
    const { count, doubleCount } = store;
    // 调用 actions
    const { increment, decrement } = store;
    return {
      count,
      doubleCount,
      increment,
      decrement,
    };
  },
};
</script>

5. 运行项目

运行项目后，你将看到一个简单的计数器应用：

  • 显示当前的 count 值。
  • 显示 count 的两倍值（doubleCount）。
  • 提供两个按钮用于增加和减少 count。

总结

Pinia 的核心概念包括：

  1. State（状态）：存储需要共享的数据。
  2. Getters（计算属性）：基于状态的派生值。
  3. Actions（操作方法）：用于修改状态的函数。
    通过这个简单的实例，你可以看到 Pinia 的使用非常直观，且与 Vue 3 的 Composition API 完美集成。

Vuex 管理的状态

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 管理的状态可以包括但不限于以下几种：

  1. 用户认证信息：
    • 用户登录状态
    • 用户信息（如用户名、邮箱、头像等）
    • 认证令牌（如JWT）
  2. 应用配置：
    • 应用级别的设置（如主题、语言等）
    • 功能开关
  3. 用户界面状态：
    • 弹窗、对话框的显示隐藏状态
    • 面包屑导航的当前状态
    • 加载状态（如加载指示器的显示与隐藏）
  4. 数据缓存：
    • 从服务器获取的数据（如文章列表、用户信息等）
    • 缓存的数据，用于提高性能和减少API请求
  5. 表单状态：
    • 表单字段的值
    • 表单验证状态
  6. 路由状态：
    • 路由守卫的管理
    • 路由历史记录
  7. 网络请求状态：
    • 请求是否正在进行中
    • 请求结果（成功或失败）
  8. 错误处理：
    • 错误消息
    • 异常状态
  9. 模块化状态：
    • 如果应用复杂，可能会使用模块化来组织Vuex，每个模块管理自己的状态。
  10. 插件或第三方服务状态：
    • 插件的配置和状态
    • 第三方服务的集成状态（如支付服务、社交媒体登录等）
  11. 全局唯一标识符（ID）：
    • 用于跟踪记录或分析的唯一标识符
      Vuex的核心概念包括状态（State）、视图（View）和行为（Actions）。状态是响应式的，这意味着当状态发生变化时，视图会自动更新以反映新的 state。行为（Actions）是可提交的mutation，用于执行异步操作和复杂的同步操作。
      在实际应用中，Vuex管理的状态取决于应用的具体需求和复杂性。设计良好的Vuex状态管理可以帮助开发者更好地维护和理解应用的状态变化，提高开发效率和应用性能。

Pinia相比vuex的优点

Pinia 相比 Vuex 具有多项显著的优点，尤其是在 Vue 3 项目中，这些优点使其成为更受欢迎的状态管理工具。以下是 Pinia 相比 Vuex 的主要优势：

1. 更简洁的 API 设计

Pinia 的 API 更加简洁直观，基于 Vue 3 的 Composition API 设计，使用 defineStore 定义状态，避免了 Vuex 中复杂的 mutations、actions 和 getters 分离。这种设计使得状态管理更加灵活，代码也更易于理解和维护。

2. 更好的 TypeScript 支持

Pinia 从一开始就为 TypeScript 提供了出色的类型推导支持，几乎不需要手动定义类型。这与 Vuex 的类型支持相比，极大地提升了开发体验。Pinia 的类型安全特性减少了运行时错误，提升了开发效率。

3. 更轻量级

Pinia 的体积非常小，打包后仅约 1KB，相比 Vuex 更轻量高效。这使得 Pinia 在性能和打包体积上更具优势，尤其适合追求高性能和快速加载的现代 Web 应用。

4. 模块化设计

Pinia 的每个 store 都是独立的，无需像 Vuex 那样通过嵌套模块来管理状态。这种扁平化的状态管理方式使得代码更加清晰，避免了 Vuex 中可能出现的模块嵌套复杂性。

5. 异步操作的支持

Pinia 的 actions 支持同步和异步操作，可以直接修改 state，无需通过 mutations。这种设计简化了状态变更的流程，使得代码逻辑更加集中且易于维护。

6. 与 Vue 3 的深度集成

Pinia 是为 Vue 3 量身定制的状态管理库，充分利用了 Vue 3 的最新特性（如 Composition API 和响应式系统），提供了更自然的集成。相比之下，Vuex 虽然也支持 Vue 3，但需要通过兼容插件。

7. 无需复杂配置

Pinia 不需要像 Vuex 那样定义 mutations 和 actions，也不需要手动注册模块。这种设计使得 Pinia 的学习曲线更低，即使是初学者也能快速上手。

8. 支持代码分割

Pinia 支持代码分割，可以按需加载状态，这在大型应用中非常有用。相比之下，Vuex 的模块化需要手动配置，较为繁琐。

总结

Pinia 在多个方面超越了 Vuex，尤其是在简洁性、TypeScript 支持、性能和与 Vue 3 的集成度上。如果你正在使用 Vue 3，Pinia 是一个非常理想的状态管理工具。