从零开始搭建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系列之六:一个完整的项目


奥巴驴
干货
2.8k 声望
217 粉丝
0 条评论
推荐阅读
前端集成weex,你需要学习的objective-c基础
最近要把weex集成到App中,需要给iOS和安卓提供库文件,这里的库文件并不是WeexSDK,而是连接iOS和Weex的中间件,所以就接触到oc,如果你也和我一样,需要集成weex,那恭喜你,oc你也需要学习。你可能会有个疑问...

会说话的鱼7阅读 3.1k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.8k评论 17

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.6k

封面图
2.8k 声望
217 粉丝
宣传栏