vue3状态管理库Pinia应用

Pinia 是 Vue 3 的官方推荐状态管理库，它是 Vuex 的替代品，旨在提供更简单、更灵活的状态管理解决方案。Pinia 充分利用了 Vue 3 的新特性，特别是 Composition API，使得状态管理更为直观和高效。

Pinia 的核心特点

1. 简单易用：比 Vuex 更简洁的 API，易于上手和使用。
2. TypeScript 支持：内置 TypeScript 支持，使得类型推导更为自然。
3. 模块化：支持将状态拆分为多个 store，使得状态管理更具组织性。
4. 热重载：在开发模式下，支持 store 的热重载，提高开发效率。

安装

npm install pinia

应用

1、创建文件夹及store文件

src/stores/counters.js

2、状态管理方法

在 Pinia 中，store 是一个包含状态、getter 和 action 的对象。使用 defineStore 函数来定义一个 store。

• state：用于定义 store 的状态。返回一个对象，包含状态属性。
• actions：用于定义可以修改状态的函数。函数内可以使用 this 访问 store 的状态。
• getters：用于定义计算属性。类似于计算属性，基于 state 计算得到的值。

3、counters.js

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

4、在组件中使用 store

新建组件，src \ components \ Mycom1.vue

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from '../stores/counter';

export default {
  setup() {
    const counter = useCounterStore(); // 访问 store

    return { counter };
  }
}
</script>

5、配置 Pinia–main.js

import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia()); // 安装 Pinia 插件
app.mount('#app');

6、app.vue加载组件

<template>
  <Mycom1 />
</template>

<script setup>
import Mycom1 from './components/Mycom1.vue';
</script>

运行效果

Pinia vs. Vuex

1. API 简洁性

Pinia：

• 提供了更简洁的 API。
• 使用 defineStore 函数定义 store，API 更加直观
• 对比 Vuex 的 actions 和 mutations，Pinia 使用 actions 和 state
  直接操作数据，省去了 mutations 的复杂性。

Vuex：

• 使用 state, mutations, actions, getters 进行状态管理，API 比较复杂。
• mutations 用于同步更新状态，actions 用于异步操作和调用 mutations。

2. TypeScript 支持

• Pinia：

  • 内置 TypeScript 支持，类型推导自然，使用起来更方便。
  • 支持在 state、actions 和 getters 中自动推导类型。

• Vuex：

  • TypeScript 支持较差，需要手动定义类型，且配置较复杂。

3. 模块化和命名空间

• Pinia：

  • 支持 store 的模块化，通过 defineStore 函数创建多个 store，使用时直接通过 useStore 获取。
  • 不需要像 Vuex 那样进行命名空间配置，使用起来更加灵活。

• Vuex：

  • 支持模块化，但需要手动配置 namespaced 和模块的组合。
  • 模块化的配置较为复杂，尤其是需要手动配置命名空间。

4. 性能和热重载

• Pinia：

  • 设计上更轻量，性能优化良好。
  • 在开发模式下支持 store 的热重载，提升开发体验。

• Vuex：

  • 性能优化良好，但在开发模式下不支持热重载，需要手动重启开发服务器。

5. 插件和持久化

• Pinia：

  • 支持插件扩展，提供了 pinia-plugin-persist 插件实现 store 的持久化。
  • 插件配置简单，集成方式灵活。

  // main.js
  import { createPinia } from 'pinia';
  import PiniaPersist from 'pinia-plugin-persist';
  
  const pinia = createPinia();
  pinia.use(PiniaPersist);
  
  const app = createApp(App);
  app.use(pinia);
  app.mount('#app');
  

• Vuex：

  • 需要使用外部插件（如 vuex-persistedstate）来实现持久化存储。
  • 插件配置稍复杂，通常需要额外的设置。

  // main.js
  import VuexPersistence from 'vuex-persist';
  
  const vuexLocal = new VuexPersistence({
    storage: window.localStorage
  });
  
  export default createStore({
    plugins: [vuexLocal.plugin]
  });