前端开发不能错过的Vuex教程，先收藏为敬 - 网站源码_资源分享

Vuex 是甚么？

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

甚么鬼小东西

看完那段专精的说明，我再说是满脸懵逼，内心深处不无巨震，即使有点儿想吃酱排骨。觉得和没说那样嘛！keep going。

甚么是”状况区域化”？

两个单纯Vue计时器应用领域

new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } }})那个状况自管理工作应用领域包涵下列两个部份：

state，驱动应用领域的数据源；view，以声明形式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状况变化。这是一类“单向数据流”的理念。然后说明一下这种理念的缺点，当我们的应用领域遇到多个模块共享状况时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状况。来自不同视图的行为需要变更同一状况。

这里说的是，vue 模块之间的传值操作，模块不多的情况下，嵌套的父子模块（prop，emit，on）和兄弟模块（global event bus）还容易操作一些。但是如果项目庞大，模块结构复杂，模块间的数据传递会变得很困难，后期代码不易维护。

若有所思

看到这里，貌似明白了些这鬼小东西是要解决甚么问题了。好的，然后我们继续往“坑”里走。

最单纯的store

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

Vuex 的状况存储是响应式的。当 Vue 模块从 store 中读取状况的时候，若 store 中的状况发生改变，那么适当的模块也会适当地得到高效更新。你无法直接改变 store 中的状况。改变 store 中的状况的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每两个状况的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用领域。// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }})

store.commit(increment); // 触发修改变量的方法console.log(store.state.count); // -> 1WTF？这是啥，这不就是“全局变量”嘛！多个模块可能用到的数据，存储到 store（仓库）里，但是这些数据是响应式的，所以对这些数据进行操作时，要遵守适当的准则。例如上面的例子。对count 进行修改，要通过 commit 来触发 mutation 里的方法对数据进行操作。

原来如此！

好了，喝口我的枸杞大补茶压压惊 [ 微笑 ]。从这里再往坑里走，才是 Vuex 的一些核心概念，他们是：

StateGetterMutationActionModule让我们开始吧。

State

Vuex 使用单一状况树，用两个对象就包涵了全部的应用领域层级状况。至此它便作为两个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用领域将仅仅包涵两个 store 实例。单一状况树让我们能够直接地定位任一特定的状况片段，在调试的过程中也能轻易地取得整个当前应用领域状况的快照。

那段话说的是两个 Vuex只能包涵两个store（存储数据的库），这样你在访问数据的时候好找些。

store的其中两个配置项就是 state 。那个state吧，可以把他比作成vue实例中的data选项，就是把数据放在这里面。

const state = { // 商品列表 shopList：[{ id: 1, name: 兰博基尼, price: 10 },{ id: 2, name: 五菱宏光, price: 99999 }], // 购物车列表 addList: []};new Vuex.Store({ state, // 这里是es6语法，相当于 state: state …});表 this.$store.state.shopList 就能看到了，或者使用辅助函数mapState，这样虽然方便单纯，建议新手先研究一下 es6 和方法原理，这里不做说明。

computed: mapState([ // 映射 this.shopList为 store.state.shopList shopList])Vuex 文档中有很多 es6 语法，如果有还不了解的同学们，可要抓紧上车喽。

拿下es6

Getter

我一度怀疑是不是文档写错了，少加了两个s。（Getters）

这一项从字面意思上就可以看出，他是用来取数据，得到数据的。有人会问，为甚么不直接用this.$store.state.shopList这种形式直接拿呢。这种形式确实可以拿到，但是经常会有一些情况是对拿到的数据做一些处理，例如格式化、过滤数据。。。这时候就会用到Getter了。

d为2的商品 shopid2(state){ return state.shopList.find((el)=>{ return el.id == 2; }); }};使用this.$store.getters.shopid2得到五菱宏光，即可加入秋名山车神争霸，走上人生巅峰。

辅助函数 mapGetters方法：

import { mapGetters } from vuexexport default { // … computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 …mapGetters([ shopid2 // … ]) }}Mutation

更改 Vuex 的 store 中的状况的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有两个字符串的事件类型 (type) 和两个回调函数 (handler)。那个回调函数就是我们实际进行状况更改的地方，并且它会接受 state 作为第两个参数：

const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状况 state.count++ } }})你需要以适当的 type 调用 store.commit 方法：this.$store.commit(increment)

你想要动我的数据，就得守我 Vuex的规矩（顺我者昌，逆我者亡）。

拿数据用 Getters，改数据用 mutation 。那个 mutation 有点儿像 vue 的生命周期钩子函数，里面是一些方法，通过 this.$store.commit（typeName）对应的函数名称，触发对应的函数。

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：

// …mutations: { increment (state, n) { state.count += n }}store.commit(increment, 10);// 在大多数情况下，载荷应该是两个对象，这样可以包涵多个字段并且记录的 mutation 会更易读mutations: { increment (state, payload) { state.count += payload.amount }}store.commit(increment, { amount: 10})辅助函数 mapMutations 方法：

import { mapMutations } from vuexexport default { // … methods: { …mapMutations([ increment, // 将 `this.increment()` 映射为 `this.$store.commit(increment)` // `mapMutations` 也支持载荷： incrementBy // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit(incrementBy, amount)` ]), …mapMutations({ add: increment // 将 `this.add()` 映射为 `this.$store.commit(increment)` }) }}在 Vuex 中，mutation 都是同步事务：

store.commit(increment)// 任何由 “increment” 导致的状况变更都应该在此刻完成。为了处理异步操作，让我们继续往下走。

Action

Action类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状况。Action 可以包涵任意异步操作。也就是说，Action 执行的还是 Mutation ，只不过他可以异步执行，差不多就是给 Mutation 外边包了一层函数。

Action 异步操作 Mutation

乍一眼看上去觉得多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行那个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: { incrementAsync ({ commit }) { setTimeout(() => { commit(increment); // 在异步函数成功后调用 Mutation }, 1000) }}通过 this.$store.dispatch(incrementAsync)即可调用。

辅助函数 mapActions方法

import { mapActions } from vuexexport default { // … methods: { …mapActions([ increment, // 将 `this.increment()` 映射为 `this.$store.dispatch(increment)` // `mapActions` 也支持载荷： incrementBy // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch(incrementBy, amount)` ]), …mapActions({ add: increment // 将 `this.add()` 映射为 `this.$store.dispatch(increment)` }) }}Module

由于使用单一状况树，应用领域的大部份状况会集中到两个比较大的对象。当应用领域变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、即使是嵌套子模块——从上至下进行同样形式的分割：

const moduleA = { state: { … }, mutations: { … }, actions: { … }, getters: { … }}const moduleB = { state: { … }, mutations: { … }, actions: { … }}const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }})store.state.a // -> moduleA 的状况store.state.b // -> moduleB 的状况Module的意思也不难理解，如果你有很多的状况，都写在一起会比较乱，后边也不好改，你就可以给他们分个类，比如 moduleA 是我的购物车模块的状况管理工作，moduleB 是我的商品信息模块的状况管理工作。

对于大型应用领域，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

├── index.html├── main.js├── api│ └── … # 抽取出API请求├── components│ ├── App.vue│ └── …└── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块甚么时候用 Vuex？

那个嘛，很单纯。你觉得你的项目里，各模块之间传参甚么的，相处的很和谐，那就无所谓用不用了。

当你的模块兄弟们有传参问题，有很多那个模块要用，那个模块要，其他好两个模块也要，要的你生不如死，你就可以考虑一下了。