责任编辑转发于 SegmentFault 街道社区
译者:据闻
甚么是Vuex ?Vuex 是两个专为 Vue.js 应用领域软件开发的状况区域化。它选用封闭式储存管理应用领域的大部份模块的状况,并以适当的准则确保状况以一类可预估的形式发生改变。Vuex 也软件系统到 Vue 的非官方增容辅助工具devtools extension,提供更多了譬如零实用性的 time-travel 增容、状况镜像导入求出等高阶增容机能。
甚么情况下使用Vuex通常情况下,他们须要依照工程项目的前述大小不一来下定决心与否须要导入Vuex,假如相较须要储存的文本并非不光多的这时候,所以他们也能透过邻近地区储存展开顺利完成许多统计数据的储存和操作形式。即使对太单纯的工程项目而言,选用 Vuex 可能将是繁杂输入输出的。
实例:他们上看呵呵非官方网站上的几段标识符,文本如下表所示右图:
new Vue({ // state管理辅助工具 data () { return { count: 0 } }, // view快照template: ` <div>{{ count }}</div> `, // actions该事件 methods: { increment () { this.count++ } }})这是两个很单纯的增长型计数机能页面,透过该事件 increment,实现 count的增长,然后渲染到界面上去。
这个状况自管理应用领域包含以下几个部分:
state:驱动应用领域的管理辅助工具。view:以声明形式将 state 映射到快照。actions:响应在 view上的用户输入导致的状况变化,然后去影响state。下图是一类”单向统计数据流“的理念:
这个理念的缺点是,当他们的应用领域遇到多个模块共享状况时,单向统计数据流的简洁性很容易被破坏,如:
多个视图依赖于同一状况。传参的方法对多层嵌套的模块将会非常繁杂,并且对兄弟模块间的状况传递无能为力。来自不同快照的行为须要变更同一状况。他们经常会选用父子模块直接引用或者透过该事件来变更和同步状况的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的标识符。因此,他们为甚么不把模块的共享状况抽取出来,以两个全局单例模式管理呢?在这种模式下,他们的模块树构成了两个巨大的“快照”,不管在树的哪个位置,任何
透过定义和隔离状况管理中的各种基本概念并透过强制准则维持快照和状况间的独立性,他们的标识符将会变得更结构化且易维护。
Vuex的四个核心理念基本概念Vuex有四个核心理念基本概念,分别是state、 getters、 mutations、 actions、 modules。
state:Vuex的基本统计数据,用来储存变量。getters:从基本统计数据state派生的统计数据,相当于state的计算属性。mutation:提交更新统计数据的方法,必须是同步的,假如须要异步选用action。每个 mutation 都有两个字符串的该事件类型和两个回调函数handler。action:和mutation的机能大致相同,不同之处在于action 提交的是mutation,而并非直接变更状况。action 能包含任意异步操作形式。modules:模块化Vuex,能让每两个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。链接:https://www.9xkd.com/
SegmentFault 思否街道社区 和文章译者展开更多互动和交流。– END –