逆战班-vuex

今天学了vuex,就是vue里面用来多组件共享状态的东西,不要被高大上的名字吓退,其实本质并不难。

vuex有几个重要的知识点,state,getter,mutation,action,module。一开始看官网的介绍,知道state的值不可以直接修改,要通过mutation写函数来修改,但是不明白为什么还要定义一个action,利用action来触发mutation,然后mutation再修改state,这不是多余的操作吗,没事找事干。后来研究发现,原来还是有道理的。 mutations里不可以处理异步的操作,因为它要记录何时修改state的数据,异步的话无法确定什么时候修改,所以有网络请求或者是异步操作的话,需要先action里面执行完,再把处理好的值传给mutation,再由mutation操作state。

可能看起来有点难理解,这里打个比方:以古代为背景,比如说,state是圣职的话,它只能由皇帝来改变,mutation就是皇帝了,然后作为一个朝廷官员,我想要发布政令,我得先向皇帝禀报,再由皇帝发出圣旨,昭告天下。这就是要修改state的话需要用mutation来操作。然后如果我这个朝廷大官如果刚好出差了,去各地巡逻,但是想要让皇帝发出政令,我总没办法说回去就回去吧,这时候我就会派遣一个小弟,让它携带数据前去京城跟皇帝说,再由皇帝发布圣旨。这个小弟就是action,它前往京城等待的时间就是发网络请求或异步操作的时间。

大概的比方就是这样,我觉得这样子记起来生动有趣,很快就记住state,mutation,和action的关系。

getter是话很好理解,它相当于 vue里的computed,把它当做计算属性就好。

module的出现是由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块。这样处理起来比较清晰易维护。

posted @ 2020-02-28 23:32  逆战-顶瓜瓜  阅读(153)  评论(1编辑  收藏  举报