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

上一篇: Vue源码解析（一） data属性映射... 下一篇:Vue.js 第九课组件

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

发布时间：2019-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了从零开始搭建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里面！