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、安装依赖
pnpm i pinia
# or
yarn add pinia
# or
npm i pinia
2、基本示例
①定义store
pinia:
// stores/counter.js
import {
defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return {
count: 0 }
},
// 也可以定义为
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})
Vuex：
//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：
import {
useCounterStore } from '@/stores/counter'
export default {
setup() {
const counter = useCounterStore()
counter.count++
counter.$patch({
count: counter.count + 1 })
counter.increment()
},
}
Vuex：
import {
computed } from 'vue'
export default {
setup () {
const store = useStore()
return {
// 访问计算函数中的状态
count: computed(() => store.state.count),
// 访问计算函数中的getter
double: computed(() => store.getters.double)
}
}
}
结语
项目中的插件选择应该取决于我们的项目方向，项目复杂度，在部分项目中应该尽量避免刻意去追求使用插件，能用简单轻量的原生代码完成功能应该成为我们的第一选择。