uniapp vue3使用pinia

Uniapp是一个跨平台的开发框架，可以使用Vue.js进行开发。而Pinia是一个基于Vue 3的状态管理库，用于管理应用程序的状态。

要在Uniapp中使用Pinia，首先需要安装Pinia库。可以通过以下命令在项目中安装Pinia：

npm install pinia

接下来，在你的Vue组件中引入Pinia，并创建一个Pinia实例：

import { createPinia } from 'pinia';

const pinia = createPinia();

export default {
  setup() {
    return {
      pinia,
    };
  },
};

然后，你可以在组件中使用pinia实例来定义和使用状态：

import { defineStore } from 'pinia';

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

最后，在组件中引入和使用状态：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment()">Increment</button>
    <button @click="counter.decrement()">Decrement</button>
  </div>
</template>

<script>
import { useCounterStore } from './stores';

export default {
  setup() {
    const counter = useCounterStore();

    return {
      counter,
    };
  },
};
</script>

这样，你就可以在Uniapp中使用Pinia进行状态管理了。通过定义和使用Pinia store，你可以轻松地管理应用程序的状态，并在组件之间共享数据。