Pinia：Vuex 的完美替代品

前端

2023-09-17 13:57:00

Pinia：Vuex 的进化

如果您正在开发一个新项目，并且完全基于 setup，强烈建议您考虑使用 Pinia 代替 Vuex。Vuex 官网明确指出 Pinia 可以理解为 Vuex 5，这意味着 Vuex 将不再推出后续版本，Pinia 将成为它的继任者。

Pinia 的优势

更轻量级： Pinia 比 Vuex 更轻量级，因为它只专注于状态管理的核心功能。
更易于使用： Pinia 的 API 更简洁明了，使用起来更加容易。
更好的性能： Pinia 采用了响应式系统，性能表现更佳。
更好的类型支持： Pinia 提供了更好的类型支持，这有助于提高代码的可读性和可维护性。

安装与使用

安装

在您的项目中安装 Pinia：

npm install pinia

使用

在 main.js 中导入并安装 Pinia：

import { createPinia } from 'pinia'
import { App } from 'vue'

const app = createApp(App)

const pinia = createPinia()

app.use(pinia)

现在，您可以在组件中使用 useStore 钩子访问 Pinia 存储：

import { useStore } from 'pinia'

const store = useStore()

Pinia 快速入门指南

创建 Store

import { defineStore } from 'pinia'

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

使用 Store

import { useStore } from 'pinia'

const store = useStore()

// 访问状态
const count = store.myStore.count

// 使用 getter
const doubleCount = store.myStore.doubleCount

// 调用 action
store.myStore.increment()