Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，适合于构建中大型单页应用。看个简单的例子：代码中标识了：用简单示意图表示他们之间的关系：我们知道，中大型的应用一般会遇到多个组件共享同一状态的情况：1、多个视图依赖于同一状态2、来自不同视图的行为需要变更同一状态于是需要把组件的共享状态抽取出来，以一个全局单例模式管理，另外，需要定义和隔离状态管理中的各种概念并强制遵守一定的规则。这就是 Vuex 背后的基本思想，借鉴了Flux、Redux、和The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。1、State: 单一状态树，用一个对象包含了全部的应用层级状态，作为一个『唯一数据源(SSOT)』而存在，每个应用将仅仅包含一个 store 实例。2、Getters: Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。3、Mutations: Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 stat免费云主机域名e 作为第一个参数。4、Actions:类似于 mutation，不同在于：①Action 提交的是 mutation，而不是直接变更状态；②Action 可以包含任意异步操作。5、Modules: 为解决单一状态树导致应用的所有状态集中在一个store对象的臃肿问题，Vuex将store分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割。接着我们开始构建备忘录应用，在以下构建过程的介绍中，再加深理解上述概念。1.安装 vue-cli2.初始化应用结果为：目录结构为：先看下我们要做的demo的效果为：主要功能模块为：新增计划，新增一个计划，编辑区显示空的计划内容。移除计划，删除一个计划之后，计划列表少了该计划。所有计划的总时长，将所有的计划时间加起来。在原来的目录结构的调整下，最终的目录结构为：下面详细介绍下：1.首页组件：Home.vue
2.计算计划总时长组件：Sidebar.vueView Code3.计划列表组件：TimeEntries.vueView Code4.新增计划组件：LogTime.vueView Code1.初始化vuex.Store: index.jsState: 单一状态树，用一个state对象包含了全部的应用层级状态，代码中只new 了一次store实例 Vuex.Store。2.负责触发事件和传入参数：actions.jsView Code实践中，我们会经常会用到 ES2015 的参数解构来简化代码（特别是我们需要调用commit很多次的时候）：3.注册各种数据变化的方法:mutations.jsView Code使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：4.记录所有的事件名:mutation-types.jsView Code配合上面常量替代 mutation 事件类型的使用入口文件渲染的模版index.html比较简单：入口文件main.js的代码：View Code代码中...App 相当于render:h => h(App)初始化组件App.vue为：View Code至此，实践结束，一些原理性的东西我还需要多去理解^_^源代码：【vuex2.0实践】
源码包： libpcap-0.8.3.tar.gz rrdtool-1.2.13.tar.gz ntop-3.3.tar.gz 安装顺序： 先libpcap-0.8.3.tar.gz 或rrdtool-1.2.13.tar.gz，后ntop-3.3.tar.g…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
