广告联盟下载湖南网站搜索排名优化电话
Pinia 相比 Vuex，在 TypeScript 方面提供了更好的支持，主要体现在以下几个方面：
- 类型推导更友好
Pinia 采用的是函数式 API，直接基于 defineStore 创建 store，类型可以被 TypeScript 自动推导，无需手动定义复杂的类型。
Vuex 的类型定义（繁琐）
在 Vuex 中，需要手动定义 State 类型，并通过泛型约束 Getter、Mutation、Action：
// 定义 State 类型
interface State {
count: number;
}
// Vuex Store
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
asyncIncrement({ commit }) {
commit(“increment”);
},
},
getters: {
doubleCount: (state) => state.count * 2,
},
});
使用时还要手动定义 mapState，并且 dispatch 也需要额外封装类型。
Pinia 的类型推导（更简洁）
Pinia 直接支持 TypeScript 类型推导，不需要手动声明 State 类型：
import { defineStore } from “pinia”;
export const useCounterStore = defineStore(“counter”, {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
getters: {
doubleCount: (state) => state.count * 2,
},
});
在组件中使用时，useCounterStore() 会自动推导出 count 的类型：
const store = useCounterStore();
store.count; // ✅ 自动推导为 number
store.increment(); // ✅ 自动识别方法类型
- 更好的 getter 类型支持
Pinia 的 getters 可以直接推导 state 的类型，而 Vuex 需要手动声明：
export const useCounterStore = defineStore(“counter”, {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2, // ✅ 自动推导 doubleCount 为 number
},
});
而 Vuex 需要手动为 getters 额外声明类型：
interface Getters {
doubleCount: number;
}
- storeToRefs 解构后仍然保留响应式
在 Vuex 中，解构 state 可能会失去响应式，而 Pinia 提供 storeToRefs()，解构后仍然能保持响应式：
import { storeToRefs } from “pinia”;
const store = useCounterStore();
const { count } = storeToRefs(store); // ✅ 仍然是响应式
Vuex 需要 computed(() => store.state.count) 来保持响应式，更加繁琐。
- 直接使用 this 访问 state 和 actions
Pinia 允许在 actions 里直接使用 this 访问 state 和其他 actions：
export const useCounterStore = defineStore(“counter”, {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++; // ✅ this 直接访问 state
},
asyncIncrement() {
setTimeout(() => {
this.increment(); // ✅ this 直接调用 actions
}, 1000);
},
},
});
Vuex 需要 commit 和 dispatch，而 Pinia 直接使用 this，更加直观。
Pinia 通过更好的类型推导、自动识别 state 和 getter，减少了对手动声明类型的依赖，使 TypeScript 支持更加友好。