pinia的使用

一、安装 Pinia

1. 首先，确保你的项目已经安装了 Vue.js（版本 3.x）。如果没有，请先安装 Vue。

2. 然后使用包管理器（如 npm 或 yarn）安装 Pinia：

   • 通过 npm 安装：npm install pinia
   • 通过 yarn 安装：yarn add pinia

3. 在你的 Vue 应用中，需要将 Pinia 挂载到 Vue 实例上。在main.js（或main.ts）文件中：

   • 导入createApp（如果使用 Vue 3）和Pinia：

   import { createApp } from 'vue';
   import { createPinia } from 'pinia';

• 创建一个 Pinia 实例：const pinia = createPinia();

• 将 Pinia 挂载到 Vue 应用：

  const app = createApp(App);
  app.use(pinia);
  app.mount('#app');

二、定义 Store（状态仓库）

1. 创建一个.js或.ts文件来定义你的 store。例如，userStore.js（假设是管理用户相关状态的 store）。

2. 导入defineStore函数：

   • 如果是 JavaScript 文件：import { defineStore } from 'pinia';
   • 如果是 TypeScript 文件，可能还需要一些类型定义：import { defineStore } from 'pinia';import { ref } from 'vue';

3. 使用defineStore函数来定义 store。它接受两个参数：

   • 第一个参数是 store 的唯一标识符（通常是一个字符串），例如'user'。这个标识符在整个应用中应该是唯一的，用于区分不同的 store。
   • 第二个参数是一个函数，该函数返回一个包含状态、操作等的对象。
   • 示例定义一个简单的用户 store：

   export const useUserStore = defineStore('user', () => {
   const user = ref({
   name: 'John Doe',
   age: 30
   });
   function updateName(newName) {
   user.value.name = newName;
   }
   return {
   user,
   updateName
   };
   });

• 这里定义了一个名为user的 store。它有一个user状态，初始值是一个包含name和age属性的对象。还有一个updateName操作函数，用于更新用户的名字。

三、在组件中使用 Store

1. 在 Vue 组件中使用 store，首先要导入定义好的 store。例如，在一个.vue组件文件中：

   • 导入之前定义的userStore：import { useUserStore } from '@/stores/userStore';

2. 在组件的setup函数（Vue 3）中获取 store 实例：

   • const userStore = useUserStore();

3. 读取状态：

   • 可以直接访问 store 中的状态。例如，在模板中显示用户名字：
   <template>
   {{ userStore.user.name }}
   </template>

• 或者在setup函数中使用：

  setup() {
  const userStore = useUserStore();
  console.log(userStore.user.name);
  return {
  userStore
  };
  }

1. 调用操作（actions）：

   • 例如，当用户点击一个按钮来更新名字时，可以在组件的方法中调用 store 中的操作函数。在模板中：
   <template>
   <button @click="updateName('Jane Doe')">Update Name</button>
   </template>

• 在setup函数中定义updateName方法并调用 store 的操作：

  setup() {
  const userStore = useUserStore();
  function updateName(newName) {
  userStore.updateName(newName);
  }
  return {
  userStore,
  updateName
  };
  }

四、状态持久化（可选）

1. 如果想在页面刷新后保留 store 中的状态，可以使用插件来实现状态持久化。例如，使用pinia-plugin-persistedstate插件。

2. 安装插件：

   • 通过 npm 安装：npm install pinia - plugin - persistedstate
   • 通过 yarn 安装：yarn add pinia - plugin - persistedstate

3. 在main.js（或main.ts）中配置插件：

   • 导入插件：import { createPinia } from 'pinia';import piniaPluginPersistedstate from 'pinia - plugin - persistedstate';
   • 创建 Pinia 实例并应用插件：

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

4. 配置持久化选项：

   • 在定义 store 时，可以指定哪些状态需要持久化。例如：

   export const useUserStore = defineStore('user', () => {
   const user = ref({
   name: 'John Doe',
   age: 30
   });
   function updateName(newName) {
   user.value.name = newName;
   }
   return {
   user,
   updateName
   };
   },{
   persist: {
   enabled: true,
   strategies: [
   {
   key: 'user',
   storage: localStorage
   }
   ]
   }
   });

• 这里通过persist选项，将userstore 的状态持久化到本地存储（localStorage），存储的键为'user'。

这就是 Pinia 的基本使用要求，通过合理地定义 store、操作状态，并在组件中使用，可以有效地管理 Vue 应用中的状态。