从零开始搭建vue-ssr系列之四：Vuex详解

为何要单独增长Vuex？

• 由于Vuex里面涉及不少概念性的东西，一时之间弄不懂，当时我在项目中集成Vuex时查了不少资料，踩了很多的坑。若是刚开始接触Vuex，你确定会从官方文档看起，官方给的例子，就是加一减一的例子，你会发现，Vuex好复杂啊，原本能够一步完成的事，为何要那么多步，并且还搞不清楚每步和每步是什么关系，蒙了。并且他的例子只针对简单的业务场景，对于生产环境（多component的环境），发现根本就是适用，下面让我来一一道来

Vuex解决了什么问题？

• 刚开始上项目时，我也没打算用Vuex，由于感受那玩意没啥用，太复杂。后来一边作，一边就发现一个比较难解决的问题：兄弟组件间通讯的问题！

若是不用Vuex，怎么作？

• 我相信，不用Vuex也能够解决，解决方案是：Root组件作为中转站，兄弟组件1向Root组件$broadcast，Root组件收到以后，再$dispatch，兄弟组件2从Root组件拿到数据，而后作业务处理，数据从树根到树顶，再到树根。

这样会带来什么问题？

• 可维护性会降低，你要想修改数据，你得维护三个地方
• 可读性会降低，由于一个组件里的数据，你根本就看不出来是从哪来的
• 增长耦合，大量的上传派发，会让耦合性大大的增长，原本Vue用Component就是为了减小耦合，如今这么用，和组件化的初衷相背。

是全部项目都用Vuex么？

• 凡是兄弟组件有大量通讯的，建议必定要用，无论大项目和小项目，由于这样会省不少事。

从哪里开始？

• 在这里我们先不谈Vuex的里面的几个概念，想看，官方上有，刚上来就提这么，效果也很差。我们先从一个简单的实例开始。

什么例子？

• 我们假设在A.vue里面经过Ajax取来数据，而后作展现，这个简单吧，我们用Vuex来看看怎么搞。若是不用Vuex，咱们取完数据会放到Data里面，而后拿到数据作v-for渲染，像这样

...
mounted() {
    Vue.axios.get('http://localhost:5000/data').then((response) => {
        const list = response.data.data.liveWodList
        this.newList = list
    })
}
...

若是用Vuex呢？

• 显然他不在你的A.vue里面，因此你得告诉他，来数据了，快收一下，怎么通知呢，这就涉及到Vuex的第一个操做：commit。这里这个操做，对应Vuex的核心概念之一：Mutations（变化）！他的做用就是通知Vuex要搞事情了，好比删除数据、增长数据等，代码是这样的this.$store.commit('setData', list)，这个有两个参数，第一个参数是要搞的事情，第二个参数是具体的数据。

数据存哪了？

• 你的数据是来了，我得有地来接收数据吧，接收数据的地对应Vuex的核心概念之二State（状态），就是全部须要变化的东西都存在我这。代码是这样的：

function setData(state, data) {
    state.list = data
}

怎么拿到数据？

• 有放确定有取啊，数据存在State，取也是从这里取。取数据就对应Vuex的核心概念之三Getters，代码是这样的的：

const getters = {
    list: state => state.list
}

目录结构

store
|____modules
| |____list.js
|____mutation-types.js
|____store_index.js

• 这是在原目录的基础上增长的目录，原项目的地址。

这个目录结构有什么好处？

• 这是Vuex在真正项目中用到的，分模块，每一个模块一个文件（modules），首先咱们看下store/mutation-types.js。这个文件的结构比较简单，代码以下：

export const LIST = {
    GET_DATA: 'getData',
    ADD_DATA: 'addData'
}

• 功能是：定义常量。常量的做用不用细说，防止手写写错。实际开发中，应该是每个模块一个常量，如今只有一个LIST，将来可能会多增长NEWS/USER等，也是一个模块，一个常量对象。
• 再看modules/list.js，代码以下：

import {
    LIST
} from '../mutation-types'

const state = {
    list: []
}

const mutations = {
    [LIST.GET_DATA](state, data) {
        state.list = data
    }
}
const getters = {
    list: state => state.list
}

• 这里面就有对应的三个概念state/mutations/getters，能够和我上面说的对比一下，如今看代码，应该很清晰了。注意：里面有不少ES6的语法，不明白的能够查一查。
• store/store-index.js为入口文件，里面主要是引入各配置，供Vue使用。注意：这个文件的引入是在src/index.js里面！

流程图

好像还缺一个？

• 对，还缺一个Action，为何没提这个Action，按个人理解，Action这一层应该是在多个操做中有价值，好比有一个预定按钮，点击以后，会更新几个Component的状态。现实开发中，基本上都是点击按钮，触发一个事件，那增长Action就会增长整个流程的链路，增长复杂度。

码上点我（Github）

---

Vue-SSR系列目录

从零开始搭建vue-ssr系列之一：写在前面的话

从零开始搭建vue-ssr系列之二：纯client端渲染以及webpack2+vue2注意事项

从零开始搭建vue-ssr系列之三：服务器渲染的奥秘

从零开始搭建vue-ssr系列之四：Vuex详解

从零开始搭建vue-ssr系列之五：开始第一个简单的server-render

从零开始搭建vue-ssr系列之六：一个完整的项目