深圳网站的网络公司,国外 wordpress模板,英文网站注意事项,功能型网站建设时间目录 1#xff0c;Pinia 介绍2#xff0c;和 Vuex 的对比3#xff0c;storeToRefs 源码分析 1#xff0c;Pinia 介绍
官网简介 Pinia 使用上的问题#xff0c;官方文档很详细#xff0c;这里不做赘述。 Pinia 是 Vue 的专属状态管理库#xff0c;支持vue2和vue3#x… 目录 1Pinia 介绍2和 Vuex 的对比3storeToRefs 源码分析 1Pinia 介绍
官网简介 Pinia 使用上的问题官方文档很详细这里不做赘述。 Pinia 是 Vue 的专属状态管理库支持vue2和vue3不能应用于其他前端框架。Pinia 是 Vue 官方团队的成员实现的原本是为了探索 vue5.x 的可能性后来发现已经实现了 vue5.x 的提案。所以就作为最新版本的 Vuex 也就是下一代状态管理库来使用了。
2和 Vuex 的对比
删除了 mutations 只保留了 stategettersactions。异步修改 state 现在可以放到 actions 中了。不再有模块嵌套只有 store状态仓库的概念store 之间独立又可相互调用。支持插件扩展比如为 store 新增属性或方法操作 action 等。因为 Pinia 使用 TS 开发的所以对 TS 有很好的支持。兼容 vue2 和 vue3同时支持选项式风格和组合式风格。轻量压缩后体积只有 1kb 左右。 在使用上同样应避免直接操作 store尽量都集中使用 actions 中的方法来操作 store 的状态。 3storeToRefs 源码分析
在组件中使用 store 的属性时会有一个问题
script setup
import { useCounterStore } from /stores/counterconst store useCounterStore()
// ❌ 这将不起作用因为它破坏了响应性这就和直接解构 props 一样
const { name, doubleCount } store // ✅ 这样写是响应式的当然也可直接使用 store.doubleCount
const doubleValue computed(() store.doubleCount)// ✅ 作为 action 的 increment 可以直接解构
const { increment } store
/script这时需要使用 storeToRefs()它将为每一个响应式属性创建引用。
script setup
import { useCounterStore } from /stores/counter
import { storeToRefs } from piniaconst store useCounterStore()
const { name, doubleCount } storeToRefs(store)
/script源码
import { toRaw, ref, isVue2, isRef, isReactive, toRef, toRefs } from vue-demi;
/*** param store - defineStore 定义的 store 对象*/
function storeToRefs(store) {if (isVue2) {return toRefs(store);}else {store toRaw(store);const refs {};for (const key in store) {const value store[key];if (isRef(value) || isReactive(value)) {refs[key] toRef(store, key);}}return refs;}
}原理其实很简单我们在解构 props 时直接解构也会失去响应式参考如何响应式解构 Props需要使用 toRef 与其源属性保持同步。
所以 storeToRefs 的原理
首先通过 store toRaw(store); 将 store 转为普通对象目的是方便遍历。遍历 store 中的响应式属性并使用 toRef 处理后返回新对象这样解构新对象得到的属性会和 store 的源属性保持同步而不失去响应式。
为什么不用 toRefs 一步到位
return toRefs(store)因为 toRefs 会将 store 中每个属性都变为响应式返回而我们只需要 store 中原本就是响应式的数据并且不需要 actions。 以上。
