cobish
cobish
## 前言 解读完 module 之后，个人觉得有了 namespaced 的 module 才算是真正的模块，于是又补充了这一篇。 namespaced 把 getter、mutation 和 action 都做了真正的模块化，使得 store 可以使用特定模块的 mutation 等。本篇就来瞧瞧 namespaced 是如何实现的？ ## 准备 这一次阅读的是 vuex 的 2.1.0 版本，源码请戳 [这里](https://github.com/vuejs/vuex/tree/v2.1.0)。 ##...
## 前言 store 将应用的状态集中起来，但如果应用变得非常复杂时，即状态非常的多时，store 就有可能变得相当臃肿。module 能够帮 store 划分了模块，每个模块都拥有自己的 state、getter、mutation、action 和 module。 那么 module 又是怎样进行划分的，划分后的模块又是如何管理自己的状态呢？接下来就来解读 module 的实现吧。 ## 准备 解读前，需要对以下知识有所了解： 1. [Array.prototype.reduce()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce_clone) 2. [Vue.set()](https://cn.vuejs.org/v2/api/#Vue-set) ## 解读 在 vuex 文档里有这么一句话：默认情况下，模块内部的 action、mutation 和...
## 前言 这也许是本系列之中最轻松的一篇解读。为什么呢？因为 mapActions 的实现原理跟 mapMutations 的差不多。只不过 mapActions 是将组件中的 methods 映射为 store.dispatch 调用。 还是走个过场吧~ ## 解读 先来看看 mapActions 的使用方式： ``` js import { mapActions } from 'vuex' export default {...
## 目标 mapMutations 辅助函数的作用就是**将组件中的 methods 映射为 store.commit 调用**。 本篇将会 mapMutations 进行简单剖析。 ## 准备 你可以需要对以下知识有所了解： 1. [es6 函数的扩展 - rest 参数](http://es6.ruanyifeng.com/#docs/function#rest-%E5%8F%82%E6%95%B0) 2. [Function.prototype.apply()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) ## 解读 先来看看 mapMutations 的使用方式： ``` js import...
## 目标 有解读 mapState 的基础，解读起 mapGetters 会发现非常的得心应手。 本篇就来看看 mapGetters 的实现吧~ ## 解读 先来看看 mapGetters 的使用方式： ``` js import { mapGetters } from 'vuex' export default { computed: { // 使用对象展开运算符将...
## 目标 vuex 官网把 getter 比作是 store 的计算属性 。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 其实，知道了 state 是 _vm 实例中的 data，那首先可以猜测 **getter 就是该实例的 computed**。 那么，我们就来验证一下这个猜测是否是正确的。先说结论，当然是正确的啦哈哈~ ## 准备 解读前，需熟悉一些方法的使用： 1. [Object.defineProperty()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty) ## 解读 跟解读 state 一样，getter...
## 目标 当一个组件里用到多个 state 的时候，就可以使用 mapState 辅助函数来生成计算属性。 那么本篇我们就来对 ``mapState`` 的实现一探究竟。 ## 准备 解读前，我们需要熟悉一些方法的使用： - [Array.isArray()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray) - [Array.prototype.map()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - [Object.keys()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) ## 解读 我们先来 mapState 的使用方式： ``` js import { mapState }...
## 目标 接下来我们则开始要研究 store 对象。 store 对象中有一个属性叫 state。state 包含了全部的应用层级状态。应用中的各个组件若使用了 state，则会保持与同步最新的状态。state 就好比是 vue 中的 data，但它是整个应用的 data。 举个简单的例子：应用中的子组件 a 和子组件 b 用到了 state.count，两个组件是非父子关系。这时，子组件 a 修改了 state.count，子组件 b 中的 state.count 也会相应修改。 那我们就来看看，**vuex 是如何在各个组件中做到监听...
## 目录结构 ``` bash ├─ gulp/ # gulp配置目录 ├─ tasks # 任务配置目录 ├─ image.js # 图片配置 ├─ other.js # 其它配置 ├─ script.js # 脚本配置 ├─ style.js # 样式配置 └─ view.js...