博客站

Pinia 原生支持 TypeScript，提供了优秀的类型推断和开发体验。以下是 Pinia 支持 TypeScript 的主要特性和使用方法：

1. 定义 Store 时使用 TypeScript

在定义 Store 时，可以为 state、getters 和 actions 添加类型注解，确保类型安全。

选项式 API

// stores/counter.ts
import { defineStore } from 'pinia';

// 定义 state 的类型
interface CounterState {
  count: number;
  message: string;
}

export const useCounterStore = defineStore('counter', {
  state: (): CounterState => ({
    count: 0,
    message: 'Hello, Pinia!',
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++; // 类型推断为 number
    },
    async incrementAsync() {
      setTimeout(() => {
        this.increment();
      }, 1000);
    },
  },
});

组合式 API

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0); // 自动推断为 Ref<number>
  const message = ref('Hello, Pinia!'); // 自动推断为 Ref<string>

  const doubleCount = computed(() => count.value * 2);

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

  async function incrementAsync() {
    setTimeout(() => {
      increment();
    }, 1000);
  }

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

2. 在组件中使用 Store

在组件中使用 Store 时，TypeScript 会自动推断出 state、getters 和 actions 的类型。

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
    <button @click="counterStore.incrementAsync">Increment Async</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from '@/stores/counter';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();

    return {
      counterStore,
    };
  },
});
</script>

3. 使用 storeToRefs 解构 Store

如果需要解构 Store 的 state 或 getters，可以使用 storeToRefs，它会保持响应式并保留类型。

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

<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();
    const { count, doubleCount } = storeToRefs(counterStore);
    const { increment } = counterStore;

    return {
      count,
      doubleCount,
      increment,
    };
  },
});
</script>

4. 为 Store 添加全局类型

如果你希望在全局范围内使用 Store 的类型，可以扩展 Pinia 的类型定义。

// types/pinia.d.ts
import { useCounterStore } from '@/stores/counter';

declare module 'pinia' {
  export interface PiniaCustomProperties {
    // 添加全局 Store 类型
    $counter: typeof useCounterStore;
  }
}

5. 在插件中使用 TypeScript

如果你开发了 Pinia 插件，可以为插件添加类型支持。

import { PiniaPluginContext } from 'pinia';

function myPlugin(context: PiniaPluginContext) {
  // 插件逻辑
}

export default myPlugin;

6. 类型推断的优势

• 自动推断：Pinia 会根据 state、getters 和 actions 的定义自动推断类型。
• 类型安全：在访问 state、调用 actions 或使用 getters 时，TypeScript 会检查类型是否正确。
• 代码提示：IDE 会根据类型定义提供代码提示，提升开发效率。

7. 示例：完整的 TypeScript Store

以下是一个完整的 TypeScript Store 示例：

// stores/user.ts
import { defineStore } from 'pinia';

interface UserState {
  name: string;
  age: number;
  isAdmin: boolean;
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    name: 'John Doe',
    age: 30,
    isAdmin: false,
  }),
  getters: {
    isAdult: (state) => state.age >= 18,
  },
  actions: {
    promoteToAdmin() {
      this.isAdmin = true;
    },
    async fetchUser() {
      const response = await fetch('/api/user');
      const user = await response.json();
      this.name = user.name;
      this.age = user.age;
    },
  },
});

总结

Pinia 对 TypeScript 的支持非常友好，主要体现在以下方面：

1. 自动类型推断：根据 state、getters 和 actions 的定义自动推断类型。
2. 类型安全：确保在访问 state、调用 actions 或使用 getters 时类型正确。
3. 代码提示：IDE 提供智能提示，提升开发效率。
4. 插件和全局类型支持：可以为插件和全局 Store 添加类型定义。

通过以上特性，Pinia 能够为 TypeScript 项目提供强大的状态管理支持。