Vuex详解

Posted joyco773

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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渲染,像这样
1 ...
2 mounted() {
3     Vue.axios.get(‘http://localhost:5000/data‘).then((response) => {
4         const list = response.data.data.liveWodList
5         this.newList = list
6     })
7 }
8 ...
如果用Vuex呢?
  • 显然他不在你的A.vue里面,所以你得告诉他,来数据了,快收一下,怎么通知呢,这就涉及到Vuex的第一个操作:commit。这里这个操作,对应Vuex的核心概念之一:Mutations(变化)!他的作用就是通知Vuex要搞事情了,比如删除数据、增加数据等,代码是这样的this.$store.commit(‘setData‘, list),这个有两个参数,第一个参数是要搞的事情,第二个参数是具体的数据。
数据存哪了?
  • 你的数据是来了,我得有地来接收数据吧,接收数据的地对应Vuex的核心概念之二State(状态),就是所有需要变化的东西都存在我这。代码是这样的:

1 function setData(state, data) {
2     state.list = data
3 }
怎么拿到数据?
  • 有放肯定有取啊,数据存在State,取也是从这里取。取数据就对应Vuex的核心概念之三Getters,代码是这样的的:
1 const getters = {
2     list: state => state.list
3 }
目录结构
1 store
2 |____modules
3 | |____list.js
4 |____mutation-types.js
5 |____store_index.js
这个目录结构有什么好处?
  • 这是Vuex在真正项目中用到的,分模块,每个模块一个文件(modules),首先我们看下store/mutation-types.js。这个文件的结构比较简单,代码如下:
1 export const LIST = {
2     GET_DATA: ‘getData‘,
3     ADD_DATA: ‘addData‘
4 }
  • 功能是:定义常量。常量的作用不用细说,防止手写写错。实际开发中,应该是每一个模块一个常量,现在只有一个LIST,未来可能会多增加NEWS/USER等,也是一个模块,一个常量对象。
  • 再看modules/list.js,代码如下:
 1 import {
 2     LIST
 3 } from ‘../mutation-types‘
 4 
 5 const state = {
 6     list: []
 7 }
 8 
 9 const mutations = {
10     [LIST.GET_DATA](state, data) {
11         state.list = data
12     }
13 }
14 const getters = {
15     list: state => state.list
16 }
  • 这里面就有对应的三个概念state/mutations/getters,可以和我上面说的对比一下,现在看代码,应该很清晰了。注意:里面有很多ES6的语法,不明白的可以查一查。
  • store/store-index.js为入口文件,里面主要是引入各配置,供Vue使用。注意:这个文件的引入是在src/index.js里面!
流程图

技术分享图片

好像还缺一个?
  • 对,还缺一个Action,为什么没提这个Action,按我的理解,Action这一层应该是在多个操作中有价值,比如有一个预约按钮,点击之后,会更新几个Component的状态。现实开发中,基本上都是点击按钮,触发一个事件,那增加Action就会增加整个流程的链路,增加复杂度。
码上点我(Github)

以上是关于Vuex详解的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

vue2和vue3中vuex的区别和使用方法详解?

详解基于vue,vue-router, vuex以及addRoutes进行权限控制

vuex基础详解