博客站

Pinia 的核心概念围绕状态管理展开，主要包括以下几个部分：

1. Store

Store 是 Pinia 的核心，用于管理应用的状态、操作和副作用。每个 Store 是独立的模块，通常对应应用中的一个功能模块。

2. State

State 是 Store 中的数据源，类似于组件的 data。它定义了 Store 的初始状态。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
});

3. Getters

Getters 是 Store 的计算属性，用于从 State 中派生出新的数据。类似于 Vue 组件中的 computed。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

4. Actions

Actions 是 Store 中的方法，用于处理业务逻辑和异步操作。类似于 Vuex 中的 actions，但 Pinia 的 Actions 可以直接修改 State。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    async incrementAsync() {
      setTimeout(() => {
        this.increment();
      }, 1000);
    },
  },
});

5. Plugins

Pinia 支持插件机制，允许扩展 Store 的功能。插件可以用于添加全局状态、监听 Store 的变化等。

import { createPinia } from 'pinia';

const pinia = createPinia();

pinia.use(({ store }) => {
  store.$subscribe((mutation, state) => {
    console.log('Store changed:', state);
  });
});

export default pinia;

6. Composition API

Pinia 完全支持 Vue 3 的组合式 API，允许在 Store 中使用 ref、computed 等组合式 API 特性。

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

7. Devtools 集成

Pinia 与 Vue Devtools 集成良好，方便开发者调试和追踪状态变化。

8. TypeScript 支持

Pinia 原生支持 TypeScript，提供更好的类型推断和开发体验。

import { defineStore } from 'pinia';

interface CounterState {
  count: number;
}

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

总结

Pinia 的核心概念包括 Store、State、Getters、Actions、Plugins、Composition API、Devtools 集成 和 TypeScript 支持。这些概念共同构成了 Pinia 的灵活、简洁且强大的状态管理方案。