1. 自学最终目标

本拍子他们会如是说数据处理辅助工具 vuex。主要包括甚么是 Vuex、Vuex 的加装、和怎样建立和采用 Vuex 基础架构。

2. 甚么是 Vuex

Vuex 是两个专为 Vue.js应用领域软件开发的状态区域化。它选用封闭式repeats应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式发生改变。

2.1 甚么是状况区域化

让他们从两个单纯的 Vue 算数应用领域已经开始：

示例模拟

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> </head> <body> <div id=“app”> <div> {{ count }} </div> <div> <button @click=“increase”>添加一次</button> <button @click=“decrease”>减少一次</button> </div> </div> </body> <script src=“https://unpkg.com/vue/dist/vue.js”></script> <script type=“text/javascript”> var vm = new Vue({ el: #app, data() { return { count: 0 } }, methods: { increase() {this.count++ }, decrease() { this.count– } } })</script> </html>

“运行案例” 可查看在线运行效果

这个状况自管理应用领域包含以下几个部分：

state，驱动应用领域的数据源；view，以声明形式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状况变化。

以下是两个表示 “单向数据流” 理念的单纯示意：

但是，当他们的应用领域遇到多个模块共享状况时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状况。来自不同视图的行为需要变更同一状况。

对于问题一，传参的方法对于多层嵌套的模块将会非常繁琐，并且对于兄弟模块间的状况传递无能为力。对于问题二，他们经常会选用父子模块直接引用或者通过事件来变更和同步状况的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，他们为甚么不把模块的共享状况抽取出来，以两个全局单例模式管理呢？在这种模式下，他们的模块树构成了两个巨大的 “视图”，不管在树的哪个位置，任何组

通过定义和隔离状况管理中的各种概念并通过强制准则维持视图和状况间的独立性，他们的代码将会变得更结构化且易维护。

2.2 甚么时候采用 Vuex

Vuex 可以帮助他们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行衡量。

如果您不打算开发大型单页应用领域，采用 Vuex 可能是繁琐冗余的。确实是如此 —— 如果您的应用领域够单纯，您最好不要采用 Vuex。两个单纯的 store 模式就足够您所需了。但是，如果您需要构建两个中大型单页应用领域，您很可能会考虑怎样更好地在模块外部管理状况，Vuex 将会成为自然而然的选择。

3. 加装 Vuex

3.1 直接下载

他们可以在官网 (vuex) 上直接下载vuex。在 Vue 之后引入 vuex 会进行自动加装：

3.2 CDN 引用

3.3 NPM 或 Yarn

npm install vuex –saveyarnadd vuex

在两个模块化的打包系统中，您必须显式地通过 Vue.use() 来加装 Vuex：

import Vue from vue import Vuex from vuex Vue.use(Vuex)

当采用全局 script 标签引用 Vuex 时，不需要以上加装过程。

4. 基本示例

每两个 Vuex 应用领域的核心就是 store（仓库）。“store” 基本上就是两个容器，它包含着你的应用领域中大部分的状况 (state)。Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状况存储是响应式的。当 Vue 模块从 store 中读取状况的时候，若 store 中的状况发生改变，那么适当的模块也会适当地得到高效更新。你不能直接改变 store 中的状况。改变 store 中的状况的唯一途径就是显式地提交 (commit) mutation。这样使得他们可以方便地跟踪每两个状况的变化，从而让他们能够实现一些辅助工具帮助他们更好地了解他们的应用领域。最单纯的store:

示例模拟

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> </head> <body> <div id=“app”>{{count}}</div> </body> <script src=“https://unpkg.com/vue/dist/vue.js”></script> <script src=“https://unpkg.com/[email protected]/dist/vuex.js”></script> <script type=“text/javascript”> const store = new Vuex.Store({ state: { count: 12 } }) var vm = new Vue({ el: #app, created() { console.log(store.state.count) }, computed: { count() { return store.state.count } } }) </script> </html>

“运行案例” 可查看在线运行效果

代码解释在 JS 代码第 4-8 行，通过 new Vuex.Store ({…}) 建立基础架构。在 JS 代码第 12 行，他们可以通过 store.state.count 访问仓库中定义的数据。