现在建设一个基础的网站多少钱,扬中零壹网站建设,鼎成中考开卷通有关网站做的电子书,高端建站一、基本使用
1、什么是 Pinia#xff1f;
Pinia 是 Vue.js 的官方状态管理库#xff0c;是 Vuex 的“升级版”。它专为 Vue 3 和 Composition API 设计#xff0c;用于管理多个组件之间共享的数据#xff08;也叫“全局状态”#xff09;。
2、为什么需要状态管理库
Pinia 是 Vue.js 的官方状态管理库是 Vuex 的“升级版”。它专为 Vue 3 和 Composition API 设计用于管理多个组件之间共享的数据也叫“全局状态”。
2、为什么需要状态管理库
在 Vue 中多个组件如果需要共享数据例如登录用户信息、购物车内容、权限配置等仅使用 props 和 emits 会变得非常复杂。这时就需要一个“中心仓库”来统一管理这些数据 —— 这就是 Pinia 的作用。
举个例子
假设你有一个购物车组件、一个商品列表组件和一个订单组件都需要访问或修改购物车的内容。这种“共享数据”就是 Pinia 的用武之地。
在没有 Pinia 的情况下你可能需要这样做 商品列表通过 emit 告诉父组件加入购物车 父组件再传递数据给购物车组件 数据很容易混乱且难以追踪
用 Pinia 后这些组件可以直接访问全局共享的购物车数据逻辑清晰易于维护。
3、 基本使用
1. 配置 Pinia 到 Vue 应用在 main.js 或 main.ts 中引入并注册
// main.js
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)2. 创建一个 Store状态模块
你可以把每个业务逻辑写在一个独立的 store 文件中例如
// stores/counter.js 或 counter.ts
import { defineStore } from piniaexport const useCounterStore defineStore(counter, {state: () ({count: 0}),getters: {doubleCount: (state) state.count * 2},actions: {increment() {this.count}}
})
state: 用来定义数据getters: 类似于计算属性actions: 用来修改数据支持异步
3. 在组件中使用 Store
script setup
import { useCounterStore } from /stores/counterconst counter useCounterStore()function addOne() {counter.increment()
}
/scripttemplatediv当前计数{{ counter.count }}/divdiv双倍计数{{ counter.doubleCount }}/divbutton clickaddOne1/button
/template二、store
1、什么是 Pinia 的 Store
在 Pinia 中store 是用来集中管理状态、逻辑和数据的地方。它就像是一个“全局的数据容器”供多个 Vue 组件共享和操作。
每一个 store 都是独立的模块可以包含 state状态数据 getters计算属性 actions行为函数 Store 是用 defineStore() 定义的它的第一个参数要求是一个独一无二的名字。这个名字 也被用作 id 是必须传入的 Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法将返回的函数命名为 use... 是一个符合组合式函数风格的约定。
import { defineStore } from pinia// 你可以任意命名 defineStore() 的返回值但最好使用 store 的名字同时以 use 开头且以 Store 结尾。
// (比如 useUserStoreuseCartStoreuseProductStore)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore defineStore(alerts, {// 其他配置...
}) defineStore() 的第二个参数可接受两类值Setup 函数或 Option 对象。
1、Option Store
与 Vue 的选项式 API 类似我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象
export const useCounterStore defineStore(counter, {state: () ({ count: 0, name: Eduardo }),getters: {doubleCount: (state) state.count * 2,},actions: {increment() {this.count},},
})
你可以认为 state 是 store 的数据 (data)getters 是 store 的计算属性 (computed)而 actions 则是方法 (methods)。
2、Setup Store
也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似我们可以传入一个函数该函数定义了一些响应式属性和方法并且返回一个带有我们想暴露出去的属性和方法的对象。
export const useCounterStore defineStore(counter, () {const count ref(0)const doubleCount computed(() count.value * 2)function increment() {count.value}return { count, doubleCount, increment }
})
在 Setup Store 中
ref() 就是 state 属性computed() 就是 gettersfunction() 就是 actions
注意要让 pinia 正确识别 state你必须在 setup store 中返回 state 的所有属性。这意味着你不能在 store 中使用私有属性。不完整返回会影响 SSR 开发工具和其他插件的正常运行。
2、使用 Store
虽然我们前面定义了一个 store但在我们使用 script setup 调用 useStore()(或者使用 setup() 函数像所有的组件那样) 之前store 实例是不会被创建的
script setup
import { useCounterStore } from /stores/counter
// 可以在组件中的任意位置访问 store 变量 ✨
const store useCounterStore()
/script
请注意store 是一个用 reactive 包装的对象这意味着不需要在 getters 后面写 .value。就像 setup 中的 props 一样我们不能对它进行解构
script setup
import { useCounterStore } from /stores/counter
import { computed } from vueconst store useCounterStore()
// ❌ 这将不起作用因为它破坏了响应性
// 这就和直接解构 props 一样
const { name, doubleCount } store
name // 将始终是 Eduardo //
doubleCount // 将始终是 0 //
setTimeout(() {store.increment()
}, 1000)
// ✅ 这样写是响应式的
// 当然你也可以直接使用 store.doubleCount
const doubleValue computed(() store.doubleCount)
/script 3、如何从 Pinia 的 store 中 解构变量 的同时 保持响应式 在 Vue 中如果你这样写const { name, doubleCount } useCounterStore()
那么 name 和 doubleCount 会失去响应性也就是说它们变成了普通变量不再随着 store 的状态变化自动更新页面。 使用 storeToRefs()
import { storeToRefs } from piniaconst store useCounterStore()
const { name, doubleCount } storeToRefs(store)storeToRefs() 会把 store 中的所有响应式属性state 和 getters转换成 ref 对象从而保留响应性。
const { increment } store
这里可以直接解构 action因为 actions 本身就是函数 它们是绑定过 this 的不需要 ref 包装 所以解构时不会失效直接拿来调用即可
4、总结
属性类型是否需要 storeToRefs()是否保持响应性是否可以解构state 数据✅ 需要✅✅通过 storeToRefsgetters✅ 需要✅✅通过 storeToRefsactions❌ 不需要✅始终✅直接解构
三、state 在 Pinia 中state 就是你用来存储全局数据的地方。它相当于组件中的 data()但它可以被多个组件共享。 例如
state: () ({count: 0,user: {name: Xia,loggedIn: false}
})这段代码定义了两个状态变量count 和 user你可以在任何组件中使用和修改它们。
1、state 的三个关键点
1. 必须是一个函数返回对象
这是为了确保每个 store 实例有自己的状态尤其是在 SSR 环境中。
state: () ({count: 0
})
2. 是响应式的
Pinia 内部使用 Vue 的响应式系统reactivity API来管理状态。这意味着当你修改 state 中的数据使用它的组件会自动更新。
3. 可以直接读写
与 Vuex 不同Pinia 的 state 变量可以直接修改不需要通过 mutation。例如
store.count // 这是合法的
store.user.name Yang // 也可以这样直接改2、 state高级用法
1. 重置 state$reset() 方法
作用 将 state 恢复为创建时定义的初始值。 适合用于退出登录、清空表单、重置计数器等场景。
使用方式
选项式 API 可直接使用 store.$reset()。
const store useStore()
store.$reset()
这个方法会自动调用最初定义的 state() 函数用返回的对象替换当前的 state。
组合式 API 需要手动实现 $reset() 方法。 如果你使用的是 组合式 API即 defineStore(id, () {...}) 格式需要自己手动写一个 $reset() 方法
export const useCounterStore defineStore(counter, () {const count ref(0)function $reset() {count.value 0}return { count, $reset }
})2、$patch() — 批量或复杂修改 state
作用 用于一次性更新多个 state 属性。 避免多次赋值产生性能问题也方便调试devtools 会合并记录。 支持复杂的数组/对象操作。
用法
对象方式简洁
store.$patch({count: store.count 1,name: DIO
})函数方式适合复杂修改
store.$patch((state) {state.items.push({ id: 1, name: shoes })
})$state — 替换整个 state实际上是 patch
作用 用于初始化或从服务器、localStorage 恢复 state。 虽然看起来是“覆盖”但实际上是调用了 $patch()。
store.$state { count: 24, name: Zhang }3、mapState() — 把 state 映射为只读计算属性
作用 用于在选项式 API 的组件中使用 Pinia 的 state。 让 store.count 变成 this.count方便模板访问。 本质上是一个只读 computed()。
computed: {...mapState(useCounterStore, [count])
}4、mapWritableState() — 把 state 映射为可写计算属性
作用 和 mapState() 类似但支持修改值。 适合表单绑定、v-model 等双向数据绑定场景。
computed: {...mapWritableState(useCounterStore, [count])
}
✅ 你可以在模板中用 v-modelcount 实现响应式输入。
5、$subscribe() — 监听 state 的变化
作用 监听 store 的 state 改变并触发回调。 常用于持久化localStorage、发送日志、自动保存等场景。 与 Vue 的 watch() 不同$subscribe() 是 patch 触发一次不是属性粒度触发。
store.$subscribe((mutation, state) {localStorage.setItem(cart, JSON.stringify(state))
})加上 { detached: true }让监听器在组件卸载后仍然有效适合全局监听。
6、watch(pinia.state) — 监听整个应用状态全局级别
✅ 作用 用于在应用级别跟踪所有 store 的状态。 常用于初始化持久化系统或跨模块状态变化处理。
watch(pinia.state,(state) {localStorage.setItem(piniaState, JSON.stringify(state))},{ deep: true }
)小知识
“初始化持久化系统”是指在 Vue 应用中通过 Pinia 将全局状态state保存到浏览器的本地存储如 localStorage并在应用加载时恢复之前保存的状态从而实现“断电重连”、“页面刷新不丢数据”等功能。 “跨模块状态变化处理”指的是监听或响应多个 Pinia store 之间的状态变动从而实现它们之间的协调、联动或同步逻辑。
为什么需要跨模块状态处理
在实际开发中你通常会为不同功能创建多个 store模块化
Store 模块功能userStore管理登录用户信息cartStore管理购物车内容orderStore管理订单信息uiStore控制 UI 状态弹窗、loading 等
但这些模块的状态往往不是孤立的 用户退出登录时需要清空购物车、重置订单模块 添加商品到购物车后UI 弹窗需要自动关闭 切换语言后需要让其他模块响应更新
四、Getter
1、什么是 Getter
在 Pinia 中getter 就是计算属性computed用于从 state 中派生出一些数据例如格式化、计算总和、过滤等。
它的作用就像 Vue 组件中的 computed Vuex 中的 getter
2、Getter 的作用
主要功能举例说明派生出新值例如 items.length、count * 2、是否登录基于 state 但不会直接修改 state保证“只读逻辑”提高代码可读性通过 getter 抽象逻辑例如 isAdmin性能优化只有依赖的值变化时才重新计算和 computed 一样 Getter 的定义方式
在选项式 API中推荐初学者
export const useCounterStore defineStore(counter, {state: () ({count: 2}),getters: {doubleCount: (state) state.count * 2,isEven: (state) state.count % 2 0}
})在组合式 API中进阶
export const useCounterStore defineStore(counter, () {const count ref(2)const doubleCount computed(() count.value * 2)return { count, doubleCount }
}) Getter 的使用方式
在组件中直接访问不需要调用
script setup
import { useCounterStore } from /stores/counter
const counter useCounterStore()
/scripttemplatep原始{{ counter.count }}/pp双倍{{ counter.doubleCount }}/p
/template
✅ 注意getter 就像计算属性是自动响应式的不需要加括号。✍️ Getter 可以访问其他 state、getter
getters: {isEven: (state) state.count % 2 0,label: (state, getters) getters.isEven ? 偶数 : 奇数
}3、Getter 是只读的
你不能直接修改 getter 的返回值 store.doubleCount 10 // ❌ 不允许会报错 如果你需要修改值请通过 action 或直接改 state。 1. 访问其他 Getter组合 Getter 当你想让一个 getter 基于另一个 getter 的结果继续计算可以直接通过 this 访问其他 getter。
export const useCounterStore defineStore(counter, {state: () ({ count: 0 }),getters: {doubleCount(state) {return state.count * 2},doubleCountPlusOne(): number {return this.doubleCount 1}}
})重点说明
this.doubleCount 是另一个 getter
如果你用 TypeScript必须指定返回值类型如 : number
2. 向 Getter 传递参数返回一个函数
❌ 错误方式不能这样做
// 不支持getUserById(id) { ... }正确方式返回一个函数
export const useUserListStore defineStore(userList, {state: () ({users: [{ id: 1, name: A }, { id: 2, name: B }]}),getters: {getUserById: (state) {return (userId) state.users.find((user) user.id userId)}}
})注意 返回函数的 getter 不会被缓存不像 computed每次调用都重新执行 更适合用于 过滤、查找 等需要参数的场景 3. 缓存变体先筛选再返回函数
getActiveUserById(state) {const activeUsers state.users.filter((u) u.active)return (id) activeUsers.find((u) u.id id)
}
适合场景
当你要多次按 id 查询某个子集如活跃用户
手动做了第一步过滤以节省后续运算 4. 访问其他 Store 的 Getter
import { useOtherStore } from ./other-storeexport const useStore defineStore(main, {state: () ({ localData: 10 }),getters: {otherGetter(state) {const otherStore useOtherStore()return state.localData otherStore.doubleValue // 使用别的 store 的 getter}}
})
你可以在 getter 中随意使用其他 store就像在组件中那样要确保其他 store 已经定义好尽量避免循环依赖Store A 调用 BB 又回头调用 A 五、Action Action 相当于组件中的 method。它们可以通过 defineStore() 中的 actions 属性来定义并且它们也是定义业务逻辑的完美选择。 类似 getteraction 也可通过 this 访问整个 store 实例并支持完整的类型标注(以及自动补全✨)。不同的是action 可以是异步的你可以在它们里面 await 调用任何 API以及其他 action 1、定义
1. 使用选项式 API 定义 Store
import { defineStore } from pinia
export const useCounterStore defineStore(counter, {state: () ({count: 0}),actions: {increment() {this.count}}
})
✅ 说明
state: 返回一个对象定义响应式数据 actions: 包含可以修改 state 的方法
这是 Pinia 的 选项式 API 写法类似 Vue 组件的 data、methods 2. 在组件中使用 store有两种写法
✅ 使用 setup()组合式 API 风格
import { useCounterStore } from /stores/counter
export default defineComponent({setup() {const counterStore useCounterStore()return { counterStore }},methods: {incrementAndPrint() {this.counterStore.increment()console.log(New Count:, this.counterStore.count)}}
})特点
虽然这是在选项式组件中但使用了 setup()所以不需要 mapState() 或 mapActions() 映射
store 的属性都挂在 this.counterStore 上
✅ 不使用 setup()使用 mapActions() 辅助函数
import { mapActions } from pinia
import { useCounterStore } from ../stores/counterexport default {methods: {...mapActions(useCounterStore, [increment]),...mapActions(useCounterStore, { myOwnName: increment })}
}特点将 store 中的 action 映射为当前组件的 method
this.increment() 实际调用的是 store.increment()
如果你不使用 setup()这是官方推荐的写法2. 订阅 Action 的执行$onAction()
✅ 作用
$onAction() 允许你拦截 action 的执行过程记录日志、添加监控、处理错误等。
const unsubscribe store.$onAction(({ name, args, after, onError }) {const start Date.now()console.log(Start ${name} with args:, args)after((result) {console.log(Finished ${name} in ${Date.now() - start}ms. Result:, result)})onError((err) {console.warn(Failed ${name} in ${Date.now() - start}ms. Error:, err)})
})回调参数说明
参数说明name当前执行的 action 名称args调用该 action 时传入的参数after(fn)在 action 成功执行后触发的回调onError(fn)在 action 执行失败或抛错时触发的回调
3. 解绑监听器防止内存泄露 unsubscribe() // 手动移除订阅器
✅ 默认行为 如果 store 是在组件的 setup() 中创建的$onAction() 会自动在组件卸载时移除监听器。
✅ 永久监听不随组件销毁 store.$onAction(callback, true) // 第二个参数为 true
适用于 全局日志系统 性能监控 状态操作历史记录 六、插件
1、什么是 Pinia 插件
Pinia 插件是用来扩展所有 store 的功能的工具。它们可以 添加默认属性 注入共享方法 实现状态持久化、本地缓存、日志记录等功能
可以把插件理解为给每个 Store 加“外挂”功能类似 Vue 插件或 Vuex 插件。
插件 给每个 store 加功能的小外挂。
想象一下你有很多个 store就像很多个员工。你想让每个员工都多一个新技能比如 会自动保存工作成果 自动把 state 保存到 localStorage 每次干活都写日志 action 调用时打印日志 都能说一句“你好老板” 添加一个公共方法
你不用每次都手动写这段逻辑而是通过 插件一次性注入到所有 store 里就像给每个员工配发一个新“工具包”。
2、插件能做什么
Pinia 插件可以用来实现以下场景
功能示例状态持久化保存 store 到 localStorage自动记录操作日志记录每次 action 调用的时间、参数注入公共方法如 $toast()、$confirm()初始化共享状态比如全局主题、设置项插件封装业务逻辑例如 API 请求封装、授权检测 Pinia 插件是一个函数可以选择性地返回要添加到 store 的属性。它接收一个可选参数即 context。
export function myPiniaPlugin(context) {context.pinia // 用 createPinia() 创建的 pinia。context.app // 用 createApp() 创建的当前应用(仅 Vue 3)。context.store // 该插件想扩展的 storecontext.options // 定义传给 defineStore() 的 store 的可选对象。// ...
}
然后用 pinia.use() 将这个函数传给 pinia
pinia.use(myPiniaPlugin)
插件只会应用于在 pinia 传递给应用后创建的 store否则它们不会生效。
3、如何使用插件
✅ 注册插件到 Pinia 实例
// main.js
import { createPinia } from pinia
import piniaPlugin from ./myPluginconst pinia createPinia()
pinia.use(piniaPlugin)✅ 插件的基本结构
// myPlugin.js
export default function myPlugin({ store }) {// 添加一个自定义属性store.hello world// 添加一个共享方法store.sayHello () {console.log(Hello from ${store.$id})}
}使用后你可以在任意 store 中访问
const store useMyStore()
store.sayHello() // 打印Hello from myStore4、插件能做的几件事举例
插件功能作用说明类比自动保存 state 到本地页面刷新后还能恢复数据自动保存工作成果打印日志每次调用 action 时记录操作打卡上下班增加自定义方法比如 $toast() 弹窗提示提供快捷按钮修改 store 行为比如封装通用校验定制化员工行为
5、插件和 store 有什么区别
Store 是什么插件是干嘛的管理状态数据和操作actions扩展每个 store 的功能每个业务写一个全局使用一次所有 store 都能用比如 userStore, cartStore比如“保存功能”、“日志功能”
6、插件的真正价值
插件的核心作用是统一增强所有 store 的功能而不是在每个 store 里重复写。
举个例子
如果你希望所有模块的状态都能自动保存到本地比如购物车、用户设置等你肯定不想在每个 store 里写一遍 localStorage.setItem()。
所以你就写一个插件让每个 store 自动保存它自己的数据只要注册一次全局生效。
