当前位置：首页 > news >正文

vuex和pinia区别

news 来源：原创 2025/5/22 17:12:10

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);
},
},
});