广东网站制作公司,免费制作h5页面的工具,网站改版设计方案,街机网页游戏大全引言
随着Vue 3的推出#xff0c;Pinia应运而生#xff0c;成为官方推荐的状态管理库#xff0c;旨在替代Vuex。Pinia与Vuex相比#xff0c;带来了以下主要区别和优势#xff1a;
更简洁的API#xff1a;Pinia的API设计更加直观和简洁#xff0c;易于理解和使用。更好…引言
随着Vue 3的推出Pinia应运而生成为官方推荐的状态管理库旨在替代Vuex。Pinia与Vuex相比带来了以下主要区别和优势
更简洁的APIPinia的API设计更加直观和简洁易于理解和使用。更好的TypeScript支持Pinia从一开始就考虑了TypeScript的集成使得类型安全的代码编写更加方便。模块化Pinia支持模块化store使得状态管理更加灵活和可扩展。无需映射辅助函数Pinia不需要像Vuex那样使用map辅助函数简化了组件中的状态访问。
说人话升级版的vuex
Pinia简介
Pinia 是一个为 Vue.js 设计的状态管理库它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案它旨在替代 Vuex 4后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理同时保持足够的灵活性以适应各种规模的应用。
Pinia的诞生背景和目标
随着 Vue 3 的推出其引入了 Composition API这为状态管理提供了新的可能性。Pinia 的诞生正是为了充分利用 Composition API 的优势提供一个更加现代化和简洁的状态管理库。
Pinia与Vuex 4的主要区别
Pinia 与 Vuex 4 相比引入了许多改进和新特性
API 设计Pinia 的 API 设计更加简洁去除了 Vuex 4 中的一些复杂概念如 mutations。TypeScript 支持Pinia 从一开始就考虑了 TypeScript 的集成提供了更好的类型支持。模块化Pinia 支持模块化 store每个模块可以有自己的 state、getters、actions 和 mutations。无需映射辅助函数在 Pinia 中你不需要使用 mapState、mapGetters 等辅助函数可以直接在组件中使用 store。
Pinia的核心概念store、state、getters、actions
Pinia 的核心概念与 Vuex 类似但进行了简化和改进
StorePinia 的 store 是状态管理的基本单位每个应用可以有多个 store。一个 store 包含了应用状态state、计算属性getters、以及修改状态的方法actions。StateState 是应用的当前状态它是一个响应式的 JavaScript 对象。在 Pinia 中state 可以是任何类型的数据。GettersGetters 类似于 Vue 的计算属性它们是基于 state 的派生状态。Getters 可以用来返回经过计算或转换的 state或者用来实现一些通用的逻辑。ActionsActions 是用来修改 state 的方法。在 Pinia 中actions 可以是同步的也可以是异步的。与 Vuex 不同Pinia 不再区分 actions 和 mutations所有的状态修改方法都称为 actions。
安装和设置Pinia
如何在Vue 3项目中安装Pinia
1.安装Pinia 使用npm或yarn来安装Pinia库。在项目根目录下打开终端执行以下命令之一
npm install pinia或者
yarn add pinia2.创建Pinia实例 在你的主文件通常是main.js或main.ts中引入并创建Pinia实例
import { createApp } from vue
import { createPinia } from pinia
import App from ./App.vueconst app createApp(App)
const pinia createPinia()app.use(pinia)
app.mount(#app)创建第一个Pinia store的步骤
1.创建Store文件 在项目中创建一个新的文件夹例如stores并在其中创建一个新的文件例如counterStore.js。
2.定义Store 在counterStore.js文件中使用defineStore函数定义你的store
import { defineStore } from piniaexport const useCounterStore defineStore(counter, {state: () {return { count: 0 }},actions: {increment() {this.count},decrement() {this.count--}}
})在Vue组件中使用Pinia store
1.引入Store 在需要使用store的组件中引入你刚才创建的store
import { useCounterStore } from /stores/counterStore2.使用Store 在组件的setup函数中使用useCounterStore来获取store实例并访问其状态和方法
import { useCounterStore } from /stores/counterStore
import { ref } from vueexport default {setup() {const counterStore useCounterStore()const count ref(counterStore.count)function increment() {counterStore.increment()}function decrement() {counterStore.decrement()}return { count, increment, decrement }}
}3.模板中使用 在组件的模板部分你可以直接使用count变量和increment、decrement方法
templatedivh1Count: {{ count }}/h1button clickincrementIncrement/buttonbutton clickdecrementDecrement/button/div
/template
使用pinia-plugin-persistedstate持久化存储组件式为例
下面是一个类似的示例展示了如何在 Pinia store 中使用组件式的持久化存储
import { defineStore } from pinia;
import { ref, computed } from vue;export const useCounterStore defineStore(counter, () {// 定义状态const count ref(100);const msg ref(hello pinia);// 定义方法const addCount () count.value;const subCount () count.value--;// 定义计算属性const double computed(() count.value * 2);// 返回状态和方法return {count,addCount,subCount,double,msg,};
}, {// 持久化配置persist: {key: hahaha, // 持久化存储的键名paths: [count, msg], // 指定需要持久化的状态路径},
});在这个示例中我们定义了一个名为 useCounterStore 的 Pinia store其中包含 count 和 msg 两个状态以及 addCount、subCount 两个方法来修改 count 的值。我们还定义了一个计算属性 double用于计算 count 的两倍。
在 persist 配置中我们指定了 key 为 hahaha这将作为存储在本地存储中的键名。paths 数组包含了需要持久化的状态路径这里我们指定了 count 和 msg。
当热还有其他的persist配置不太常用就不讲了有兴趣的小伙伴可以去官网查看结尾会放
Pinia进阶特性
插件系统和自定义插件的创建
Pinia 提供了一个强大的插件系统允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。
1.创建插件 创建一个插件通常涉及定义一个函数该函数接收一个Pinia实例作为参数并对其进行操作。
export function myPiniaPlugin(pinia) {// 可以在这里添加全局状态、拦截actions等
}2.使用插件 在创建Pinia实例时可以将插件添加到实例中。
const pinia createPinia()
pinia.use(myPiniaPlugin)模块化store和命名空间
Pinia 支持模块化store允许你将不同的状态逻辑分割到不同的文件中提高代码的可维护性。
1.定义模块化store 在模块化store中你可以定义自己的state、getters和actions。
// store/modules/counter.js
import { defineStore } from piniaexport const useCounterStore defineStore(counter, {state: () ({ count: 0 }),actions: {increment() {this.count},decrement() {this.count--}}
})2.使用命名空间 在模块化store中你可以使用命名空间来避免不同模块间的命名冲突。
// store/modules/counter.js
import { defineStore } from piniaexport const useCounterStore defineStore(counter, {state: () ({ count: 0 }),actions: {increment() {this.count},decrement() {this.count--}}
}, {// 开启命名空间namespaced: true
})3.在组件中使用模块化store 在组件中你可以通过命名空间来访问特定模块的状态和actions。
import { useCounterStore } from /stores/modules/counterconst counterStore useCounterStore()
console.log(counterStore.count) // 使用命名空间访问状态
counterStore.increment() // 使用命名空间访问actions 资料推荐
配置 | pinia-plugin-persistedstate官网
总结
掌握 Pinia 的使用将有助于你在开发 Vue 3 应用时更加高效地管理复杂的状态逻辑提升应用的整体性能和用户体验。希望本文能为你在使用 Pinia 进行状态管理时提供有价值的参考和指导。
