状态管理库vuex的官方文档

所需积分/C币:50 2017-09-05 10:32:00 1.12MB PDF
180
收藏 收藏
举报

vuex的官方文档。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
npm install vex --save yarn add vox 在一个模块化的打包系统中,您必须显式地通过Vue.use()来安装 import vue frcm ' vue import vucx from vucx Vue. Lse(vex) 当使用全局 标签引用 时,不需要以上安装过程。 自己构建 如果需要使用分支下的最新版本,您可以直接从 上克隆代码并自己 构建。 gitclonehttps://github.com/vuejs/vuex.gitnodemodules/vuex cd nodc modules/vucx npm install pm run build 是什么? 是一个专为 应用程序开发的状态管理模式。它采用集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以种可预测的方式发生变化。 也集成到 的官方调试工具 ,提供了诸如零配置的 调试、状态快照导入导出等高级调试功能。 什么是“状态管理模式”? 让我们从一个简单的计数应用开始: new Vue( r state data ( return t count: 0 vIew template div> count )</div> 7 actions methods increment this, count++ 这个状态自管理应用包含以下几个部分 ,驱动应用的数据源 以声明方式将映射到视图; 响应在上的用户输入导致的状态变化 以下是一个表小“单向数据流”理念的极简小意 4 Act View 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破 坏 多个视图依赖于同状态。 来自不同视图的行为需要变更同一状态 对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间 的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事 件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护 的代码 因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在 这种模式下,我们的组件树构成了一个大的“视图”,不管在树的哪个位置,任何 组件都能获取状态或者触发行为! 另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码 将会变得更结构化且易维护。 这就是 背后的基本思想,借鉴了 和 。与其他模式不同的是, 是专门为 设计的状态管理 库,以利用 的细粒度数据响应机制来进行高效的状态更新。 Backend apl yuen 面国 D Dispatch Commit Actions Vue Components Mutations K-A- Devtools State Render Mutate 什么情况下我应该使用 虽然 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要 对短期和长期效益进行权衡 如果您不打算开发大型单页应用,使用 可能是繁琐冗余的。确实是如此 如果您的应用够简单,您最好不要使用 一个简单的 就足够您所需了。但是,如果您需要构建是个中大型单页应用,您很可能会 考虑如何更好地在组件外部管理状态, 将会成为自然而然的选择。引用 的作者 的话说就是 架构就像眼镜:您自会知道什么时候需要它。 7 开始 每 应用的核心就是 (仓库)。 基本上就是一个容器,它 包含着你的应用中大部分的状态 和单纯的全局对象有以下两点不 的状态存储是响应式的。当 组件从 中读取状态的时侯,若 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 你不能直接改变 中的状态。改变 中的状态的唯一途径就是显式地提 交 这样使得我们可以方便地跟踪每一个状态的变化,从而 让我们能够实现一些工具帮助我们更好地了解我们的应用。 最简单的 提示:我们将在后续的文档示例代码中使用 语法。如果你还没能掌握 ,你得抓紧了! 安装之后,让我们来创建个。创建过程直截了当——仅需要提供 个初始 对象和一些 //如果在模块化构建系统中,请确保在开头调用了Vuc.usc(Vucx) const. store new Vuex Store( count: 0 mutations increment (state) state. count++ 现在,你可以通过stoe. state米获取状态对象,以及通过 store. commit方法 触发状态变更: store commit( increment 8 console -og(store state court)// 再次强调,我们通过提交 的方式,而非直接改变 store. state. count, 是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加 明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样 也让我们有机会去实现些能记录每次状态改变,保存状态快照的调试工具。有了 它,我们甚至可以实现如时间穿梭般的调试体验。 由于 中的状态是响应式的,在组件中调用 中的状态简单到仅需要在 计算属性中返回即可。触发变化也仅仅是在组件的 中提交 这是一个最基本的记数应用示例 接下来,我们将会更深入地探讨一些核心概念。让我们先从概念开始。 单一状态树 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至 此它便作为一个『唯一数据源 而存在。这也意味着,每个应用将仅仅包 含一个 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在 调试的过程中也能轻易地取得整个当前应用状态的快照。 单状态树和模块化并不冲突 在后面的章节里我们会讨论如何将状态和状态变 更事件分布到各个子模块中 在组件中获得 状态 那么我们如何在组件中展示状态呢?由于 的状态存储是响应式的,从 实例中读取状态最简单的方法就是在计算属性中返回某个状态 //创建一个 Counter组件 div>[t count ]]</di omputed: 1 count ()I return store, state court 每当 store. state. count变化的时侯都会重新求取计算属性,并且触发更新相 关联的 然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在个需要 使用 的组件中需要频繁地导入,并∏在测试组件时需要模拟状态。 通过 store选项,提供了一种机制将状态从根组件「注入』到每一个子组件 中(需调用vue.se(uex)) const app //把 store对象提供给" store"选项,这可以把 store的实例注入所有的子组件 store components: Countor emp⊥a-e </d 通过在根实例中注册stoe选项,该 实例会注入到根组件下的所有子组件 中,且子组件能通过this. estore访问到。让我们史新下 Counter的实现: const counter template:'<div>if count )]</div> outed: t() 七his. store.Stat t mapstate辅助函数

...展开详情
试读 47P 状态管理库vuex的官方文档
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 签到新秀

  • 分享达人

关注 私信
上传资源赚钱or赚积分
最新推荐
状态管理库vuex的官方文档 50积分/C币 立即下载
1/47
状态管理库vuex的官方文档第1页
状态管理库vuex的官方文档第2页
状态管理库vuex的官方文档第3页
状态管理库vuex的官方文档第4页
状态管理库vuex的官方文档第5页
状态管理库vuex的官方文档第6页
状态管理库vuex的官方文档第7页
状态管理库vuex的官方文档第8页
状态管理库vuex的官方文档第9页
状态管理库vuex的官方文档第10页

试读结束, 可继续读5页

50积分/C币 立即下载