入门Pinia

Pinia介绍

Pinia，VUE的状态管理库，封装了一些API来管理程序中的状态，可以替代vue，  具体介绍看到官网查看。

主要功能

1. 状态管理：Pinia 允许你在应用级别管理和存储状态。你可以创建多个 store，每个 store 都有自己的状态和行为。这有助于将你的状态管理逻辑组织得更清晰。
2. 简洁的 API：Pinia 的 API 非常简洁且易于理解。你可以使用 defineStore 函数创建一个新的 store，然后在你的组件中使用 useStore 函数来获取 store 的实例。
3. DevTools 支持：Pinia 提供了强大的 DevTools 支持，包括时间旅行、状态查看和修改等。
4. Server-Side Rendering (SSR) 支持：Pinia 支持在服务器端渲染 (SSR) 的应用中使用，允许你在服务器上预填充状态，然后在客户端接管。
5. TypeScript 支持：Pinia 提供了出色的 TypeScript 支持，让你可以利用 TypeScript 的类型检查功能编写更稳健的代码。
6. 灵活的插件系统：Pinia 提供了一个插件系统，你可以用来扩展 Pinia 的功能或改变其行为。

核心概念理解

Pinia 的核心概念包括状态（State）、获取（Getters）和动作（Actions）。这些概念为你提供了一种组织和管理应用状态的方式。

状态（State）：状态是你在 store 中存储的数据。每个 Pinia store 都有自己的状态，这个状态是一个 JavaScript 对象。你可以在定义 store 时初始化状态：

export const useCounterStore = defineStore('storeId', { state: () => ({ count: 0, }), }); 
//访问 状态
const store = useCounterStore() 
//修改 状态 
store.count++ 
//还可以用$patch修改状态 
store.$patch({ count: store.count + 1 }) 
//还可以 
store.$patch((state) => { store.count++ }) 
//重置状态 
store.$reset()

在这个例子中，count 就是这个 store 的状态。

获取（Getters） 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    getUserById: (state) => {  return (userId) => state.users.find((user) => user.id === userId)  },
  },
})

使用getters
//a.vue 文件中
<template>
  <p>{{ store.doubleCount }}</p>
  <p>User: {{ store.getUserById(2) }}</p>
</template>

<script setup>
    const store = useCounterStore()
</script>

动作（Actions）：动作是一种修改 store 状态的方法。在 Pinia 中，你可以在 actions 属性中定义动作：

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    // 因为我们依赖 `this`，所以我们不能使用箭头函数
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})

使用actions
//a.vue文件中
<script setup>
export default {
    const store = useCounterStore()
    // 将操作作为商店的方法调用
    store.randomizeCounter()
}
</script>

在这个例子中，increment 就是一个动作，它将 count 的值增加 1。

通过这些核心概念，Pinia 提供了一种简单而强大的方式来管理和操作你的应用状态。