Pinia—安装及封装

Pinia—安装及封装

1. Pinia 介绍

Pinia 是 Vue.js 的一个状态管理库，作为 Vuex 的轻量级替代品而推出。它设计简洁、易于使用，并充分利用了 Vue 3 的 Composition API 和 TypeScript 支持，使得开发体验更加流畅。

2. 与 Vuex 的不同

Pinia 和 Vuex 的主要不同点包括：

• 模块化管理：Pinia 更加模块化，你可以创建多个独立的 store，而不需要像 Vuex 那样需要全局注册。
• API 简化：Pinia 的 API 更加简化，减少了样板代码，如无需手动定义 mutations 和 actions。
• TypeScript 支持：Pinia 内置了对 TypeScript 的支持，无需额外配置，类型推断更智能。
• Vue 3 特性：Pinia 完全依赖于 Vue 3 的 Composition API，提供了更现代化的开发方式。

3. Pinia 的使用

使用 Pinia 很简单。以下是基本的使用步骤：

• 安装：通过 npm 或 yarn 安装 Pinia。

  npm install pinia
  

• 创建 Store：使用 defineStore 创建一个新的 store。

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

• 在组件中使用：在 Vue 组件中引入并使用这个 store。

  import { useCounterStore } from '@/stores/counter';
  
  const counterStore = useCounterStore();
  counterStore.increment();
  

4. Pinia 的持久化

Pinia 支持持久化存储，你可以通过引入第三方插件如 pinia-plugin-persistedstate 来实现。

• 安装插件：

  npm install pinia-plugin-persistedstate
  

• 配置插件：
  在 store 初始化时配置插件以实现持久化：

  // src/stores/index.js
  import { createPinia } from "pinia";
  import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; //引入持久化插件
  
  const stores = createPinia();
  stores.use(piniaPluginPersistedstate); //将插件添加到 pinia 实例上
  
  // 全局注册 store
  export function setupStore(app) {
    app.use(stores);
  }
  export { stores };
  

• 导入pinia：

  import { createApp } from "vue";
  import App from "./App.vue";
  import { setupStore } from "./stores";
  
  const app = createApp(App);
  setupStore(app);
  app.mount("#app");