学习Vue3 Day3（Pinia）

一、Pinia(Vuex) 的继承者

Pinia 是为 Vue 3 设计的 Store 状态管理模式，它旨在成为 Vuex 的继承者。Pinia 提供了一个更简洁、更直观的方式来管理 Vue 应用中的状态。以下是 Pinia 的一些关键特性和用法：

与vuex对比：

安装 Pinia

首先，你需要安装 Pinia 包：

npm install pinia

或者

yarn add pinia

创建 Pinia Store

在 Vue 3 应用中，你可以创建一个 Pinia Store 来管理状态：

一个功能一个模块好维护管理，这里可以理解成相同的逻辑模块封装成一个store

，这里和Java中的封装函数很像

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 18
  }),
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
});

在组件中使用 Pinia Store

在 Vue 组件中，你可以使用 useUserStore 来访问和修改状态：

注意：需要返回return才能使用

import { defineComponent } from 'vue';
import { useUserStore } from './stores/userStore';

export default defineComponent({
  setup() {
    const userStore = useUserStore();

    function updateUsername(newName) {
      userStore.updateName(newName);
    }

    return {
      userStore,
      updateUsername
    };
  }
});

组件导入生成定义

在模板中，你可以像这样使用：

<template>
  <div>
    <p>Name: {{ userStore.name }}</p>
    <button @click="updateUsername('John')">Update Name to John</button>
  </div>
</template>

直接调用

Pinia 的响应式系统

Pinia 使用 Vue 3 的 Composition API 来创建响应式状态。这意味着你可以在任何地方使用 reactive 或 ref，并且它们都会自动响应状态的变化。

优势

• 简单直观：Pinia 的 API 设计简洁直观，易于理解和使用。
• 
• 插件系统：Pinia 允许你通过插件扩展其功能，例如添加持久化或服务器端渲染支持。
• 模块化：Pinia 的 Store 是模块化的，这使得在大型应用中管理状态变得更加容易。
• 与 TypeScript 的兼容性：Pinia 提供了良好的 TypeScript 支持，使得在类型安全的条件下编写状态管理代码更加方便。

• 注意事项：

在实际开发中使用 Pinia 时，有几个关键点需要注意：

1. 状态更新：Pinia 中直接修改状态（state）是可能的，但推荐使用 actions 来处理状态更新，以保持响应性和可预测性10。

2. 使用 storeToRefs：当你需要在解构后保持响应性时，使用 storeToRefs 包裹 state10。

3. 动作（Actions）：动作可以是同步或异步的，并且可以访问整个 store 实例，包括 state 和其他 actions10。

4. 订阅状态变化：可以订阅 store 中状态的变化，这在组件卸载后仍然可以保留，或者通过传递参数来分离订阅10。

5. 插件系统：Pinia 提供了插件系统，可以用来扩展 Pinia 的功能，例如使用 pinia-plugin-persistedstate 来实现数据持久化10。

6. 代码分割：Pinia 的设计允许更好的代码分割，它只会打包实际用到的 store，减少了资源浪费7。

7. TypeScript 支持：Pinia 为 TypeScript 提供了良好的支持，可以在定义 store 时利用 TypeScript 的类型检查功能34。

8. Vue Devtools 集成：Pinia 与 Vue Devtools 集成，可以使用 Devtools 来跟踪状态变化和调试应用35。

9. Store 的独立性：Pinia 中的每个 store 都是独立的，它们之间可以自由组合，甚至可以有循环依赖关系35。

10. Store 的注册：在 Vue 2 中，Pinia 使用 Vuex 的接口，因此不能与 Vuex 一起使用。而在 Vue 3 中，Pinia 作为插件挂载，无需手动注册 Store6。

11. 全局状态管理：Store 应该包含那些在应用程序中广泛使用的数据，而不是仅在单个组件中使用的数据12。

12. 从 Vuex 迁移：Pinia 支持在迁移到 Vue 3 的过程中与 Vuex 混用，提供了平滑的迁移路径5。

13. 性能考虑：在使用 Pinia 时，考虑性能影响，避免在 actions 中执行过重的计算或异步操作，以免影响应用性能。

• Pinia 是为 Vue 3 特别设计的，不兼容 Vue 2。
• 如果你从 Vuex 迁移到 Pinia，需要对现有的状态管理逻辑进行一些调整，因为两者的 API 存在差异。
• 注意：数据可以通过store.语法访问，也可以解构，直接解构的化会丧失响应式
• 

原因是不可以解构对象

• 

需要使用storeToRefs进行解构

• 

二、Pinia插件--持久化存储（pinia-plugin-persistedstate）

选项式Api:与state同级

import { defineStore } from 'pinia'
 
export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

组合式：第三个参数

import { defineStore } from 'pinia'
 
export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  }
)

现在，你的整个 Store 将使用默认持久化配置保存。

配置持久化的数据会存到 localStore里。

详细配置

给key起别名

选择性声明数据：