Pinia：更符合直觉的 Vuex 继任者

Pinia 最初是为 Vue 3 设计的状态管理探索，现在已是官方推荐方案。在新项目里用了一圈，确实比 Vuex 清爽。

定义 store

// stores/posts.js
import { defineStore } from 'pinia'

export const usePostsStore = defineStore('posts', {
  state: () => ({ list: [], loading: false }),
  getters: {
    count: (state) => state.list.length,
  },
  actions: {
    async fetchAll() { // 没有 mutations 了，直接在 action 里改
      this.loading = true
      this.list = await fetch('/api/posts').then(r => r.json())
      this.loading = false
    },
  },
})

组件中使用

const store = usePostsStore()
store.list // 直接读
store.fetchAll() // 直接调 action
store.$patch({ loading: true }) // 批量修改
store.$reset() // 重置为初始 state

相比 Vuex 的改进

取消 mutations：state 直接改，少一层概念，devtools 照样能追踪
天然模块化：每个 store 独立定义、自动按需引入，没有嵌套 modules 和命名空间烦恼
TypeScript 完整推断：state/getters/actions 全部自动推导，不用手写类型声明
支持组合式写法：store 里直接 ref/computed/function，和组件写法完全一致
更轻（约 1KB），支持 SSR 和 Nuxt 官方集成

组合式风格的 store

export const useCounter = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

与组件逻辑复用同一套心智模型，从组件抽到 store 几乎零成本。Vuex 项目不必急着迁，但新项目没有理由再选 Vuex。

Pinia：更符合直觉的 Vuex 继任者

Pinia：更符合直觉的 Vuex 继任者

定义 store

组件中使用

相比 Vuex 的改进

组合式风格的 store

评论0 条

发表评论