Vue的状态管理

相信使用Vue框架的，应该对Vue自带的Vuex不陌生吧。

Vuex作为Vue项目状态管理的初代目，它在大型的项目中对于我们全局存储状态，管理参数具有相当不错的效果。

然而对于一些小中型项目来说，用Vuex就显得有点笨，笨重的笨。

所以通常情况下，我们在小中型项目中呢会使用其他的替代方案，比如用localStorage、eventBus管理状态，共享数据。

这就是Vue中状态管理的大多数情况。

什么是Pinia？

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

简洁而强大的 API：Pinia.js 提供简洁而强大的 API，使得状态管理变得更加直观和易于理解。它采用类似于 Vuex 的概念，通过定义和使用 store 实例进行状态的管理和共享。同时，Pinia.js 还提供了丰富的插件和扩展机制，方便开发者根据具体需求进行定制和扩展。
TypeScript 集成和类型安全：Pinia.js 内置对 TypeScript 的完全支持，可以轻松地将 TypeScript 应用于 Vue 项目中。通过 TypeScript 的类型检查功能，开发者可以在编码阶段捕获潜在的错误，提高代码的可靠性和可维护性。Pinia.js 还提供了一致的类型推断和自动生成，减少了手动编写类型定义的工作量。
优化的性能和响应性：Pinia.js 采用了现代的状态管理架构，利用 Vue.js 的响应式系统实现高效的状态更新。Pinia.js 通过使用精确的变更侦测和异步批处理，以及基于订阅的数据流机制，实现了优化的性能和响应性。这使得应用程序在处理大量数据和频繁状态变化时表现出色。
插件生态和开发工具支持：Pinia.js 拥有丰富的插件生态和开发工具支持，为开发者提供了更多方便和灵活的选择。例如，Pinia Devtools 是一个 Chrome 扩展，可以轻松地在开发过程中调试和监控 Pinia.js 应用程序的状态和变化。这些工具和插件大幅简化了开发流程和调试过程，提升了开发效率和质量。
社区活跃和文档丰富：Pinia.js 拥有活跃的社区和友好的开发者群体，您可以随时获得帮助和支持。官方文档详细介绍了 Pinia.js 的使用方法和最佳实践，示例代码和教程也使得初学者能够快速上手。此外，Pinia.js 社区还定期举办在线活动和分享会，促进交流与合作。

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

简而言之，它更轻量，更适合小中型项目使用。

如何使用Pinia

1、安装依赖

bash 复制代码

pnpm i pinia
# or
yarn add pinia
# or
npm i pinia

2、基本示例

①定义store

pinia:

typescript 复制代码

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

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

Vuex：

javascript 复制代码

//store.js
import {createStore} from 'vuex'
const useStore = createStore({
  state: {
    todos: [
      { id: 1, title: '...', done: true }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

②在组件中使用

pinia：