vue3状态管理库Pinia应用
Pinia 是 Vue 3 的官方推荐状态管理库,它是 Vuex 的替代品,旨在提供更简单、更灵活的状态管理解决方案。Pinia 充分利用了 Vue 3 的新特性,特别是 Composition API,使得状态管理更为直观和高效。
Pinia 的核心特点
- 简单易用:比 Vuex 更简洁的 API,易于上手和使用。
- TypeScript 支持:内置 TypeScript 支持,使得类型推导更为自然。
- 模块化:支持将状态拆分为多个 store,使得状态管理更具组织性。
- 热重载:在开发模式下,支持 store 的热重载,提高开发效率。
安装
npm install pinia
应用
1、创建文件夹及store文件
src/stores/counters.js
2、状态管理方法
在 Pinia 中,store 是一个包含状态、getter 和 action 的对象。使用 defineStore
函数来定义一个 store。
state
:用于定义 store 的状态。返回一个对象,包含状态属性。actions
:用于定义可以修改状态的函数。函数内可以使用this
访问 store 的状态。getters
:用于定义计算属性。类似于计算属性,基于state
计算得到的值。
3、counters.js
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++;},decrement() {this.count--;}},getters: {doubleCount: (state) => state.count * 2}
});
4、在组件中使用 store
新建组件,src \ components \ Mycom1.vue
<template><div><p>Count: {{ counter.count }}</p><p>Double Count: {{ counter.doubleCount }}</p><button @click="counter.increment">Increment</button><button @click="counter.decrement">Decrement</button></div>
</template><script>
import { useCounterStore } from '../stores/counter';export default {setup() {const counter = useCounterStore(); // 访问 storereturn { counter };}
}
</script>
5、配置 Pinia–main.js
import { createPinia } from 'pinia';const app = createApp(App);
app.use(createPinia()); // 安装 Pinia 插件
app.mount('#app');
6、app.vue加载组件
<template><Mycom1 />
</template><script setup>
import Mycom1 from './components/Mycom1.vue';
</script>
运行效果
Pinia vs. Vuex
1. API 简洁性
Pinia:
- 提供了更简洁的 API。
- 使用
defineStore
函数定义 store,API 更加直观 - 对比 Vuex 的
actions
和mutations
,Pinia 使用actions
和state
直接操作数据,省去了mutations
的复杂性。
Vuex:
- 使用
state
,mutations
,actions
,getters
进行状态管理,API 比较复杂。 mutations
用于同步更新状态,actions
用于异步操作和调用mutations
。
2. TypeScript 支持
-
Pinia:
- 内置 TypeScript 支持,类型推导自然,使用起来更方便。
- 支持在
state
、actions
和getters
中自动推导类型。
-
Vuex:
- TypeScript 支持较差,需要手动定义类型,且配置较复杂。
3. 模块化和命名空间
-
Pinia:
- 支持 store 的模块化,通过
defineStore
函数创建多个 store,使用时直接通过useStore
获取。 - 不需要像 Vuex 那样进行命名空间配置,使用起来更加灵活。
- 支持 store 的模块化,通过
-
Vuex:
- 支持模块化,但需要手动配置
namespaced
和模块的组合。 - 模块化的配置较为复杂,尤其是需要手动配置命名空间。
- 支持模块化,但需要手动配置
4. 性能和热重载
-
Pinia:
- 设计上更轻量,性能优化良好。
- 在开发模式下支持 store 的热重载,提升开发体验。
-
Vuex:
- 性能优化良好,但在开发模式下不支持热重载,需要手动重启开发服务器。
5. 插件和持久化
-
Pinia:
- 支持插件扩展,提供了
pinia-plugin-persist
插件实现 store 的持久化。 - 插件配置简单,集成方式灵活。
// main.js import { createPinia } from 'pinia'; import PiniaPersist from 'pinia-plugin-persist';const pinia = createPinia(); pinia.use(PiniaPersist);const app = createApp(App); app.use(pinia); app.mount('#app');
- 支持插件扩展,提供了
-
Vuex:
- 需要使用外部插件(如 vuex-persistedstate)来实现持久化存储。
- 插件配置稍复杂,通常需要额外的设置。
// main.js import VuexPersistence from 'vuex-persist';const vuexLocal = new VuexPersistence({storage: window.localStorage });export default createStore({plugins: [vuexLocal.plugin] });