脚本宝典收集整理的这篇文章主要介绍了

从零开始搭建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里面!

流程图

clipboard.png

好像还缺一个?

  • 对,还缺一个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系列之六:一个完整的项目

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过