uniapp如何使用pinia进行状态管理

“在uniapp中如何使用pinia进行状态管理？有没有具体的配置步骤和代码示例？官方文档看不太明白，希望能提供一个简单的demo说明如何在uniapp项目中安装、配置和使用pinia。”

2 回复

在uniapp中使用pinia，先安装：npm install pinia。在main.js中创建并挂载pinia实例：

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

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

然后创建store文件定义状态，在组件中用useStore()获取状态和操作。


在 UniApp 中使用 Pinia 进行状态管理，可以高效管理跨页面的共享状态。以下是具体步骤和示例：

1. 安装 Pinia

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

npm install pinia

2. 配置 Pinia

在 main.js 中引入并挂载 Pinia：

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')

3. 创建 Store

在 stores 目录下新建文件（例如 counter.js）定义状态：

import { defineStore } from 'pinia'

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

4. 在页面中使用

在 Vue 组件中引入并使用 Store：

<template>
  <view>
    <text>计数：{{ counter.count }}</text>
    <text>双倍：{{ counter.doubleCount }}</text>
    <button @click="counter.increment()">增加</button>
    <button @click="counter.decrement()">减少</button>
  </view>
</template>

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

const counter = useCounterStore()
</script>

5. 数据持久化（可选）

如需持久化存储，可配合 pinia-plugin-persistedstate 插件：

npm install pinia-plugin-persistedstate

在 main.js 中配置：

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

在 Store 中启用持久化：

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  persist: true // 启用持久化
})

注意事项：

  • 确保 UniApp 项目基于 Vue 3（Pinia 仅支持 Vue 3）。
  • 状态修改通过 Actions 或直接赋值（需开启响应式）。
  • 持久化插件默认使用 localStorage，在 UniApp 中会适配为本地存储。

通过以上步骤，即可在 UniApp 中实现高效的状态管理。

回到顶部