一个pinia的demo

当然可以！下面我将展示一个简单的 Pinia 应用示例，包括如何设置一个 store，并在一个简单的 Vue 组件中使用这个 store。

首先，你需要安装 Pinia 和 Vue。如果你还没有安装这些依赖，可以通过以下命令进行安装（假设你已经有了一个 Vue 项目）：

npm install pinia @vue/runtime-dom
# 或者使用 yarn
yarn add pinia @vue/runtime-dom

接下来，我们创建一个简单的 Pinia store 示例，并在 Vue 组件中使用它。

创建 Pinia Store

在你的项目中创建一个新的文件 stores/counterStore.js，并在其中定义一个 store：

// stores/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
  // id 必须是唯一的
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    reset() {
      this.count = 0;
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

在 Vue 应用中使用 Store

接着，在你的 main.js 文件中设置并使用这个 store：

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

const app = createApp(App);

app.use(createPinia());

app.mount('#app');

创建一个简单的 Vue 组件

现在我们需要创建一个 Vue 组件来显示计数器，并提供按钮来增加和减少计数器的值。

创建一个 Counter.vue 组件：

<template>
  <div>
    <p>当前计数：{{ $store.count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="reset">重置</button>
  </div>
</template>

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

const counterStore = useCounterStore();

const increment = () => counterStore.increment();
const decrement = () => counterStore.decrement();
const reset = () => counterStore.reset();
</script>

在 App.vue 中使用 Counter 组件

最后，在 App.vue 中导入并使用 Counter 组件：

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './Counter.vue';

export default {
  name: 'App',
  components: {
    Counter,
  },
};
</script>

这就是一个基本的 Pinia store 应用示例。当你运行这个应用时，你会看到一个简单的计数器，你可以点击按钮来增加、减少或重置计数值。