怎样做简单公司网站,对网站建设安全性的要求,别墅装修排名,大连旅顺口旅游攻略Pinia官网
#x1f4a1; 直观 store 就像组件一样熟悉。API 旨在让您编写组织良好的 store 。
#x1f511; 类型安全 类型是推断出来的#xff0c;这意味着即使在 JavaScript 中 store 也可以为您提供自动完成功能#xff01;
⚙️ 开发工具支持 Pinia 与 Vue devtools…Pinia官网 直观 store 就像组件一样熟悉。API 旨在让您编写组织良好的 store 。 类型安全 类型是推断出来的这意味着即使在 JavaScript 中 store 也可以为您提供自动完成功能
⚙️ 开发工具支持 Pinia 与 Vue devtools 挂钩为您提供增强的 Vue 2 和 Vue 3 开发体验。 可扩展 响应存储更改以通过事务、本地存储同步等扩展 Pinia。 模块化设计 构建多个 Store 并让您的捆绑程序代码自动拆分它们。 极轻 Pinia 约 1kb您甚至会忘记它的存在 Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起最初的原则仍然相同但 Pinia 对 Vue 2 和 Vue 3 都有效并且不需要您使用组合 API。 除了安装和 SSR 之外两者的 API 都是相同的并且这些文档针对 Vue 3并在必要时提供有关 Vue 2 的注释以便 Vue 2 和 Vue 3 用户可以阅读 Pinia 是 Vue 的存储库它允许您跨组件/页面共享状态。 如果您熟悉 Composition API您可能会认为您已经可以通过一个简单的 export const state reactive({}). 这对于单页应用程序来说是正确的但如果它是服务器端呈现的会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中您也可以从使用 Pinia 中获得很多好处
dev-tools 支持跟踪动作、突变的时间线Store 出现在使用它们的组件中time travel 和 更容易的调试热模块更换在不重新加载页面的情况下修改您的 Store在开发时保持任何现有状态插件使用插件扩展 Pinia 功能为 JS 用户提供适当的 TypeScript 支持或 autocompletion服务器端渲染支持
// 定义
import { defineStore } from pinia
export const useCounterStore defineStore(counter, {state: () {return { count: 0 }},actions: {increment() {this.count},},
})// 使用
import { useCounterStore } from /stores/counter
export default {setup() {const counter useCounterStore()counter.countcounter.$patch({ count: counter.count 1 })counter.increment()},
}// 高级写法
export const useCounterStore defineStore(counter, () {const count ref(0)function increment() {count.value}return { count, increment }
})// mapStores()、mapState() 或 mapActions()
const useCounterStore defineStore(counter, {state: () ({ count: 0 }),getters: {double: (state) state.count * 2,},actions: {increment() {this.count},randomizeCounter() {this.counter Math.round(100 * Math.random())},async fetchUserPreferences(preferences) {const auth useAuthStore()if (auth.isAuthenticated) {this.preferences await fetchPreferences()} else {throw new Error(User must be authenticated)}},}
})
const useUserStore defineStore(user, {})
export default {computed: {...mapStores(useCounterStore, useUserStore)...mapState(useCounterStore, [count, double]),},methods: {...mapActions(useCounterStore, [increment]),},
}Pinia发音为 /piːnjʌ/类似于英语中的“peenya”是最接近有效包名 piña西班牙语中的_pineapple_的词。 菠萝实际上是一组单独的花朵它们结合在一起形成多个水果。 与 Store 类似每一家都是独立诞生的但最终都是相互联系的。 Pinia API 与 Vuex ≤4 有很大不同即
mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成但这不再是问题。
无需创建自定义复杂包装器来支持 TypeScript所有内容都是类型化的并且 API 的设计方式尽可能利用 TS 类型推断。不再需要注入、导入函数、调用函数、享受自动完成功能无需动态添加 Store默认情况下它们都是动态的您甚至都不会注意到。请注意您仍然可以随时手动使用 Store 进行注册但因为它是自动的您无需担心。不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store但 Pinia 通过设计提供平面结构同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。没有 命名空间模块。鉴于 Store 的扁平架构“命名空间” Store 是其定义方式所固有的您可以说所有 Store 都是命名空间的。
