pinia存储数据实例

在使用 Pinia 存储数据之前，首先需要安装和设置 Pinia 库。可以通过以下命令安装 Pinia：

npm install pinia

或者使用 yarn 安装：

yarn add pinia

接下来，你需要在你的应用程序中创建一个 Pinia 实例。可以在根组件中创建一个实例并将其注入到应用程序中。以下是一个示例：

import { createPinia } from 'pinia';

const pinia = createPinia();

// 将 pinia 实例注入到应用程序中
createApp(App).use(pinia).mount('#app');

现在，你可以创建一个存储数据的实例。你可以使用 `defineStore` 函数来创建一个存储数据的实例。以下是一个示例：

import { defineStore } from 'pinia';

export const useUserDataStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0,
  }),
  actions: {
    setName(name) {
      this.name = name;
    },
    setAge(age) {
      this.age = age;
    },
  },
});

在上面的示例中，`defineStore` 函数接受两个参数：存储数据的名称和存储数据的定义。在定义中，我们可以定义存储数据的状态和操作（actions）。

现在，你可以在组件中使用存储数据的实例了。以下是一个示例：

<template>
  <div>
    <input v-model="name" placeholder="Name" />
    <input v-model="age" placeholder="Age" />
    <button @click="saveUser">Save</button>
  </div>
</template>

<script>
import { useUserDataStore } from './store';

export default {
  setup() {
    const store = useUserDataStore();

    const saveUser = () => {
      store.setName(store.name);
      store.setAge(store.age);
    };

    return {
      name: store.name,
      age: store.age,
      saveUser,
    };
  },
};
</script>

在上面的示例中，我们引入了 `useUserDataStore` 函数，并使用它创建了一个存储数据的实例。然后，我们在组件中使用该实例的状态和操作。

这就是使用 Pinia 存储数据的基本步骤。你可以根据自己的需求定义更多的状态和操作，并在应用程序中使用它们。希望对你有所帮助！