初学Pinia（未写完）Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API

why

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

Devtools 支持
- 追踪 actions、mutations 的时间线
- 在组件中展示它们所用到的 Store
- 让调试更容易的 Time travel
热更新
- 不必重载页面即可修改 Store
- 开发时可保持当前的 State
插件：可通过插件扩展 Pinia 功能
为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
支持服务端渲染

起源篇

在引入Vuex之前，Vue.js应用程序的状态管理是通过在组件之间传递属性和事件来完成的。随着应用程序的规模和复杂性的增加，这种方法会很快变得繁琐和容易出错。此外，跟踪应用程序中的状态变化并确保不同的组件使用相同的状态也是一种挑战。

Vuex是为了解决这些问题而创建的，它为Vue.js应用程序提供了一个集中的状态管理系统。它允许开发者为应用程序的状态定义一个单一，并提供一套更新该状态的规则。这种方法使大型应用的状态管理变得更容易，并确保整个应用的状态变化是一致的。

保持一致性。

Vuex似乎要解决的问题是Vue.js应用程序中的状态管理。有了Vuex，开发者可以集中管理状态，使大型应用中的状态管理更加容易，并减少出错的可能性。

作用-具体的例子

用户认证。当用户登录到你的应用程序时，你可能想把他们的认证令牌存储在一个由Vuex管理的集中式存储中。这样一来，整个应用程序中的多个组件都可以访问该令牌，而不需要进行道具钻取。

购物车管理。如果你的应用程序有一个购物车功能，你可能想用Vuex来管理购物车的状态。这将允许你从应用程序的任何地方轻松地添加、删除或修改购物车中的物品。

搜索结果。如果您的应用程序允许用户搜索内容，您可能想使用Vuex来管理搜索结果的状态。这将允许你轻松地跟踪当前的搜索查询和已经返回的结果，并在用户细化他们的搜索时更新结果。

页面导航。如果你的应用程序有多个页面或视图，你可能想用Vuex来管理当前页面或视图的状态。这将允许你轻松地跟踪用户当前所处的页面或视图，并在用户浏览应用程序时更新该页面或视图。

在所有这些例子中，使用Vuex为管理状态提供了一个集中的存储，这使得随着时间的推移更容易维护和扩展你的应用程序。

pinna在后台系统的作用

如果你正在建立一个后台管理系统，Vuex仍然可以帮助你管理应用程序的状态。下面是Vuex在这种情况下可以帮助你解决的一些具体问题。

管理用户认证状态。如果你的后台管理系统需要用户登录，你就需要管理认证状态。Vuex可以帮助你管理认证状态，提供一个可以被你的应用程序中的所有组件访问的中央存储。你可以使用Vuex来存储用户的认证状态、用户数据和其他相关信息。

管理后端资源的状态。如果您的后台管理系统涉及到大量的数据工作，如管理用户、管理存储在数据库中的数据，或管理API请求和响应，Vuex可以帮助您管理后台资源的状态，提供一个可以用来存储数据的中央存储。你可以使用Vuex来存储你正在处理的资源的信息，比如数据库的状态或API请求的状态。

管理用户界面的状态。如果你的后台管理系统使用动态的用户界面元素，如加载旋钮或模版，你就需要管理用户界面的状态。Vuex可以帮助你管理用户界面状态，它提供了一个中央存储，可以用来存储用户界面数据。你可以使用Vuex来存储加载状态、模态状态和其他相关信息。

核心概念

先来看一看具体的例子。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以这样定义
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})


<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// with autocompletion ✨
counter.$patch({ count: counter.count + 1 })
// or using an action instead
counter.increment()
</script>
<template>
  <!-- Access the state directly from the store -->
  <div>Current Count: {{ counter.count }}</div>
</template>

State

在大多数情况下，state 都是你的 store 的核心。人们通常会先定义能代表他们 APP 的 state。在 Pinia 中，state 被定义为一个返回初始状态的函数。这使得 Pinia 可以同时支持服务端和客户端。

访问

变更 state

Getter

是什么

Getter 完全等同于 store 的 state 的计算值。

什么意思呢？就相当于在vue中的属性值，

创建方法与使用

可以通过 defineStore() 中的 getters 属性来定义它们。

建议：推荐使用箭头函数，并且它将接收 state 作为第一个参数：

访问其他 getter

使用setup()时的用法

设置setup如何使用已经创建好的store这只是一个需要记忆的语法。

初学Pinia（未写完）

why

起源篇