vuex学习笔记

mock：
方法返回测试数据；
为方法配置url（API）;
api:
为对应的url（API）提供接口定义；
components:
组件调用API接口定义；
view:
页面引用组件；

store:
state定义共享数据；
getter提供计算属性；
mutation定义修改共享数据的方法；
Action定义修改共享数据的异步方法；
Module分割 store按模块管理；

vuex:
Vuex 的内脏由五部分组成：State、Getter、Mutation、Action 和 Module。在实际应用中，这五个部分并不是必须的，你需要用到什么就添加什么。但是一般再怎么简单的 Vuex，也至少会由 State 和 Mutation 构成。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。
作用：管理全局共享对象或数据；
若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
使用方法：
在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
sotre:
仓库，一个容器，包含着应用中的大部分状态state(共享数据)
state:
状态，共享数据；
使用方法1：
从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
// 创建一个 Counter 组件
const Counter = {
  data() { return {} },
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
使用方法2：
Vuex 通过 store 选项，提供了一种机制将状态从根组件 “注入” 到每一个子组件中（需调用 Vue.use(Vuex)）：
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，
  // 这可以把 store 的实例注入所有的子组件
  store,
  // 子组件
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

Getter:
我们可以把它当成 store 中的计算属性（computed）。
就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
使用方法：
const store = new Vuex.Store({
  state: {
    date: new Date()
  },
  getters: {
    // Getter 接受 state 作为其第一个参数
    weekDate: state => {
      return moment(state.date).format('dddd'); 
    }
  }
})
getters: {
  // Getter 还也可以接收 getters 作为第二个参数
  dateLength: (state, getters) => {
    return getters.weekDate.length;
  }
}
不但如此，Getter 还会将 store.getters 对象暴露出去，你可以以属性的形式访问这些值：
console.log(store.getters.weekDate)
我们可以很容易地在任何组件中使用它：
computed: {
  weekDate () {
    return this.$store.getters.weekDate
  }
}

mutations：
只能用它里面的方法来修改 state 中的数据。
改变 store 中状态的唯一途径就是显式地提交 (commit) mutation；
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
使用方法：
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    // 事件类型 type 为 increment
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})
我们不能直接 store.mutations.increment() 来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法：
store.commit('increment')
我们还可以向 store.commit 传入额外的参数：
mutations: {
  increment (state, n) {
    state.count += n
  }
}

// 调用
store.commit('increment', 10)
mutation 中的这个额外的参数，官方给它还取了一个高大上的名字：载荷（payload）。说实话，第一次在文档中看到这个标题「提交载荷」，真的就不想往下看了。

我们往往不是败给了这些生涩的概念，而是败给了自己内心的恐惧。

大多数情况下，载荷是一个对象，能够让我们更加易读：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
关于提交的方式，有两种：
// 1、把载荷和type分开提交
store.commit('increment', {
  amount: 10
})
// 2、整个对象都作为载荷传给 mutation 函数
store.commit({
  type: 'increment',
  amount: 10
})
修改对象类型state:
mutations: {
  addAge (state) {
    Vue.set(state.student, 'age', 18)
    // 或者：
    // state.student = { ...state.student, age: 18 }
  }
}
使用常量来替代 mutation 事件的名字:
方便多人合作开发，代码管理；
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})
Mutation 必须是同步函数:
异步，无法知道状态是否发生了变化；
store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

Action：
如果需要用到异步，则需要用到Action;
Action 类似于 mutation，不同在于：
1、Action 提交的是 mutation，而不是直接变更状态。
2、Action 可以包含任意异步操作。
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
Action 函数接受一个 context 参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性，但是他们并不是同一个实例，后面学习 Modules 的时候会介绍它们为什么不一样。
所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Mutation 通过 store.commit 触发，那么 Action 则通过 store.dispatch 方法触发。
组合 Action:
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
调用:
store.dispatch('actionA').then(() => {
  // ...
})
当然，也可以这样：
actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}
我们还可以利用 async / await 的方式组合 action ：
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

Module ：
Vuex 允许我们将 store 分割成大大小小的对象，每个对象也都拥有自己的 state、getter、mutation、action，这个对象我们把它叫做 module（模块），在模块中还可以继续嵌套子模块、子子模块 ……
使用方法：
现在在 src 里面建个文件夹，命名为 module，然后再里面新建一个 moduleA.js 文件，并编写如下代码：

export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}
如上，再建一个 moduleB.js 文件，这里就不重复了。

然后打开 store.js 文件，导入这两个 module ：

import moduleA from './module/moduleA';
import moduleB from './module/moduleB';

export default new Vuex.Store({
    modules: {
        moduleA, moduleB,
    },
    // ...
}
这个时候，store 中已经注入了两个子模块 moduleA moduleB，我们可以在 App.vue 中通过 this.$store.state.moduleA.text 这种方式来直接访问模块中的 state 数据。如下修改：

// ...
computed: {
    ...mapState({
        name: state => state.moduleA.text
    }),
},
// ...
由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。
但是注意了：

模块内部的 action、mutation 和 getter 默认可是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。
访问根节点：
我们可以在模块内部的 getter 和 action 中，通过 rootState 这个参数来获取
这里需要注意的是在 getters 中，rootState 是以第三个参数暴露出来的，另外，还有第四个参数 rootGetters，用来获得根节点的 getters 信息，这里就不演示了，感兴趣自己可以去尝试。唯一要强调的就是千万不要弄错参数的位置了。

当然，action 中也能接收到 rootGetters，但是在 action 中，由于它接收过来的数据都被包在 context 对象中的，所以解包出来没有什么顺序的限制。
命名空间：
模块内部的 action、mutation 和 getter 默认是注册在全局命名空间的。如果我们只想让他们在当前的模块中生效，应该怎么办呢？

通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

我们在 moduleA.js 中添加 namespaced: true。

export default {
    namespaced: true,
    // ...
}

在全局 getter 中已经找不到 detail 的这个方法了，因为它的路劲已经改变了，不再属于全局，仅仅只属于 moduleA 了。所以，这个时候，如果我们想要访问它，必须带上路劲才行。修改 App.vue 如下：

<script>
    import {mapActions, mapGetters} from 'vuex';
    export default {
        computed: {
            ...mapGetters({
                name: 'moduleA/detail'
            }),
        },
        methods: {
            ...mapActions({
                call: 'moduleA/callAction'
            }),
            modifyNameAction() {
                this.call();
            }
        },
    }
</script>
通过前面的学习，我们已经了解到：

如果你希望使用全局 state 和 getter，rootState 和 rootGetter 会作为第三和第四参数传入 getter，也会通过 context 对象的属性传入 action。

现在如果想要在全局命名空间内分发 action 或提交 mutation 的话，那么我们只需要将 将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

export default {
    namespaced: true,
    // ...
    actions: {
        callAction({state, commit, rootState}) {
            commit('setName', '改变', {root: true});
            alert(state.text + '-' + rootState.name);
        }
    }
}

接下来看看如何在带命名空间的模块内注册全局 action。

若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中。

写法稍微有点变化，我们来看看，修改 moduleA.js，如下：

export default {
    namespaced: true,
    // ...
    actions: {
        callAction: {
            root: true,
            handler (namespacedContext, payload) {
                let {state, commit} = namespacedContext;
                commit('setText');
                alert(state.text);
            }
        }
    }
}
简单解释下，这里的 namespacedContext 就相当于当前模块的上下文对象，payload 是调用的时候所传入的参数，当然也叫载荷。
带命名空间的绑定函数：
这里就用官方的示例代码举例说明：

computed: {
    ...mapState({
        a: state => state.some.nested.module.a,
        b: state => state.some.nested.module.b
    })
},
methods: {
    ...mapActions([
        // -> this['some/nested/module/foo']()
        'some/nested/module/foo', 
        // -> this['some/nested/module/bar']()
        'some/nested/module/bar' 
    ])
}
更优雅的写法：

computed: {
    ...mapState('some/nested/module', {
        a: state => state.a,
        b: state => state.b
    })
},
methods: {
    ...mapActions('some/nested/module', [
        'foo', // -> this.foo()
        'bar' // -> this.bar()
    ])
}

将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。

我们还可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}
模块的动态注册：
在 store 创建之后，可以使用 store.registerModule 方法动态的注册模块：

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})
之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。

你也可以使用 store.unregisterModule(moduleName) 来动态卸载模块。注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。

在注册一个新 module 时，你很有可能想保留过去的 state，例如从一个服务端渲染的应用保留 state。你可以通过 preserveState 选项将其归档：store.registerModule('a', module, { preserveState: true })。
模块重用：
重用会导致模块中的数据 state 被污染，所以和 Vue 中的 data 一样，也使用一个函数来申明 state 即可。

const MyReusableModule = {
  state () {
    return {
      foo: 'bar'
    }
  },
  //...
}

promise对象：
先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用success函数或fail函数。
古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失败：' + reason);
});
1.可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：
2.Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：
job1.then(job2).then(job3).catch(handleError);
其中，job1、job2和job3都是Promise对象。
3.除了串行执行若干异步任务外，Promise还可以并行执行异步任务。
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});
4.有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：
var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});
由于p1执行较快，Promise的then()将获得结果'P1'。p2仍在继续执行，但执行结果将被丢弃。
如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

单一状态树：
1、用一个对象（主干）就包含了全部的（分支）应用层级状态。
2、每个应用（公司）将仅仅包含一个 store 实例对象（主干）。

辅助函数：
mapState：
解决一个组件需要访问多个state代码管理问题；
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    a: state => state.a,
    b: state => state.b,
    c: state => state.c,

    // 传字符串参数 'b'
    // 等同于 `state => state.b`
    bAlias: 'b',

    // 为了能够使用 `this` 获取局部状态
    // 必须使用常规函数
    cInfo (state) {
      return state.c + this.info
    }
  })
}

computed: mapState([
  // 映射 this.a 为 store.state.a
  'a',
  'b',
  'c'
])

computed: {
  localComputed () { 
    ...
  },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

mapGetters：
个和 mapState 基本上没啥区别；
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

取个别名，那就用对象的形式，以下示例的意思就是把 this.doneCount 映射为 this.$store.getters.doneTodosCount。

mapGetters({
  doneCount: 'doneTodosCount'
})

mapMutations：
import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 将 `this.increment()` 映射为 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // 将 `this.add()` 映射为 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

mapActions：
import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      // 将 `this.increment()` 映射为 
      // `this.$store. dispatch('increment')`
      'increment', 
      // `mapActions` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store. dispatch('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapActions({
      // 将 `this.add()` 映射为 
      // `this.$store. dispatch('increment')`
      add: 'increment' 
    })
  }
}
想要在组件中调用，直接 this.xxx 就完了。