知识库

Appearance

Return to top
On this page

Pinia 安装与配置

本指南将详细介绍如何在 Vue 项目中安装和配置 Pinia，以及相关的最佳实践。

安装 Pinia

使用 npm

bash
npm install pinia

使用 yarn

bash
yarn add pinia

使用 pnpm

bash
pnpm add pinia

在 Vue 3 项目中配置

1. 创建 Pinia 实例

javascript
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2. TypeScript 支持

如果使用 TypeScript，建议创建一个 stores 目录来存放所有 Store 定义：

typescript
// stores/index.ts
import { createPinia, defineStore } from 'pinia'

export const pinia = createPinia()

// 或者在 main.ts 中
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

在 Vue 2 项目中配置

安装 Vue 2 的兼容包

bash
npm install pinia@^2.0.0 @vue/composition-api

配置

javascript
// main.js
import { createApp } from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import Vue from 'vue'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

const app = new Vue({
  el: '#app',
  pinia, // 必须添加此行
  // ... 其他配置
})

插件配置

基本插件配置

javascript
import { createPinia } from 'pinia'

const pinia = createPinia()

// 添加插件
pinia.use(yourPlugin)

// 在应用中使用
app.use(pinia)

常用插件配置

1. 持久化插件

bash
npm install pinia-plugin-persistedstate
javascript
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)

2. 日志插件

javascript
import { createPinia } from 'pinia'

const loggerPlugin = (context) => {
  const { store, type, args } = context
  console.log(`[Logger] ${store.$id} ${type} was called with`, args)
}

const pinia = createPinia()
pinia.use(loggerPlugin)

app.use(pinia)

开发工具配置

Vue DevTools 集成

javascript
import { createPinia } from 'pinia'

const pinia = createPinia()

// 启用 DevTools 支持
if (process.env.NODE_ENV === 'development') {
  pinia.use(({ store }) => {
    // 为 DevTools 添加自定义属性
    store._customProperties.add('debugInfo')
  })
}

app.use(pinia)

环境特定配置

开发环境配置

javascript
import { createPinia } from 'pinia'

const createDevelopmentPinia = () => {
  const pinia = createPinia()
  
  if (process.env.NODE_ENV === 'development') {
    // 开发环境专用插件
    pinia.use(devtoolsPlugin)
    pinia.use(loggerPlugin)
  }
  
  return pinia
}

app.use(createDevelopmentPinia())

生产环境配置

javascript
import { createPinia } from 'pinia'

const createProductionPinia = () => {
  const pinia = createPinia()
  
  // 生产环境优化
  pinia.use(optimizationPlugin)
  
  return pinia
}

app.use(createProductionPinia())

模块化配置

按功能模块组织 Store

javascript
// stores/modules/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  // ... 用户相关状态
})

// stores/modules/products.js
export const useProductStore = defineStore('products', {
  // ... 产品相关状态
})

// stores/index.js
import { createPinia } from 'pinia'
import { useUserStore } from './modules/user'
import { useProductStore } from './modules/products'

export { useUserStore, useProductStore }

const pinia = createPinia()
export default pinia

高级配置选项

自定义 Store 命名空间

javascript
import { defineStore } from 'pinia'

// 使用命名空间组织 Store
export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: null,
    isAuthenticated: false,
  }),
  // ... 其他配置
})

export const useUiStore = defineStore('ui', {
  state: () => ({
    theme: 'light',
    language: 'en',
  }),
  // ... 其他配置
})

异步初始化

javascript
import { createPinia, defineStore } from 'pinia'

const pinia = createPinia()

// 异步初始化 Store
export const useAppStore = defineStore('app', {
  state: () => ({
    initialized: false,
    config: null,
  }),
  
  actions: {
    async initialize() {
      // 异步加载应用配置
      this.config = await fetchAppConfig()
      this.initialized = true
    },
  },
})

// 在应用启动时调用
const appStore = useAppStore()
await appStore.initialize()

错误处理配置

javascript
import { createPinia } from 'pinia'

const errorHandlingPlugin = (context) => {
  const { store, storeState, error } = context
  
  if (error) {
    console.error(`Store ${store.$id} error:`, error)
    // 可以在这里添加错误上报逻辑
  }
}

const pinia = createPinia()
pinia.use(errorHandlingPlugin)

app.use(pinia)

性能优化配置

javascript
import { createPinia } from 'pinia'

const performancePlugin = (context) => {
  const { store, type, args } = context
  
  // 记录性能指标
  const startTime = performance.now()
  
  // 在操作完成后记录时间
  return () => {
    const endTime = performance.now()
    console.log(`${store.$id} ${type} took ${endTime - startTime}ms`)
  }
}

const pinia = createPinia()
pinia.use(performancePlugin)

app.use(pinia)

完整的配置示例

javascript
// stores/config.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

export const configurePinia = () => {
  const pinia = createPinia()
  
  // 添加持久化插件
  pinia.use(piniaPluginPersistedstate)
  
  // 开发环境插件
  if (process.env.NODE_ENV === 'development') {
    pinia.use((context) => {
      console.log('[Pinia Debug]', context.store.$id, context.type)
    })
  }
  
  return pinia
}

通过以上配置，您可以根据项目需求灵活地设置 Pinia，确保状态管理系统的稳定性和可维护性。