uniapp 微信小程序如何集成 pinia

在 uniapp 开发的微信小程序中，如何正确集成和使用 pinia 进行状态管理？我已经按照官方文档安装了 pinia，但在小程序运行时提示找不到模块或报错。请问需要额外配置哪些步骤？是否需要针对微信小程序环境做特殊处理？能否提供一个完整的配置示例？

2 回复

在uniapp中集成pinia很简单。先安装依赖：npm install pinia。在main.js中引入并挂载到App实例。然后在小程序页面中通过useStore()使用即可。注意：uniapp需使用pinia的持久化插件来兼容小程序存储。


在 UniApp 中集成 Pinia 进行状态管理，需先安装依赖并进行配置。以下是详细步骤：

1. 安装 Pinia

在项目根目录下运行命令安装 Pinia：

npm install pinia

2. 配置 main.js

在 main.js 中创建并挂载 Pinia 实例：

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

export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia()
  
  app.use(pinia)
  
  return {
    app,
    pinia
  }
}

3. 创建 Store

在 stores 目录下创建状态管理文件（例如 counter.js）：

import { defineStore } from 'pinia'

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

4. 在组件中使用

在页面或组件中引入并使用 Store：

<template>
  <view>
    <text>Count: {{ counter.count }}</text>
    <text>Double: {{ counter.doubleCount }}</text>
    <button @click="counter.increment()">+1</button>
  </view>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

注意事项：

  • 兼容性：确保 Pinia 版本与 Vue 3 兼容（UniApp 使用 Vue 3 需配置 vue3 条件编译）。
  • 持久化：如需数据持久化，可搭配 pinia-plugin-persistedstate 插件。
  • 微信小程序：无需额外配置，Pinia 在微信小程序中可直接使用。

通过以上步骤即可在 UniApp 微信小程序中集成 Pinia 进行状态管理。

回到顶部