逆战班-vuex

Posted 2020-11-28 linxf

今天学了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 分割成模块。这样处理起来比较清晰易维护。