VUEX基本介绍

Dear 丶 2022-03-07 12:36 292阅读 0赞

一、什么是Vuex?

Vuex是一个专为vue.js应用程序开发的状态管理模式。

当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

二、Vuex的五个核心概念

State  
Getters  
Mutations  
Actions  
Modules  
其中State和Mutations在任何项目都会接触到的核心概念。为什么说这两个是最核心的呢？  
第一、首先State是我们唯一的数据源，也就是说我们需要把组件里面的一些状态提取出来放到State里面去，State是我们唯一的载体，我们必须要去定义我们的State，这是至关重要的。

第二、怎么去改变State里面的值呢？比如说如何去修改购物车里面的商品数量，我们在商品列表里面+1，在购物车列表里面把他删掉，它就要-1,那么从哪去操作这个State，就通过Mutations,Mutations是唯一可以提交和改变状态的。  
因此这两个状态是我们必须要掌握的。  
Getters、Actions、Modules，如果我们的项目不是太过于复杂，那么仅仅使用State和Mutations这两就可以满足业务需求了。  
接来下我们来分别来看看这几个状态。  
首先第一个： State

1、什么是State，我也提到过，我们每一个组件里面的data里面的变量我们都称之为State,State也是我们整个Vue整个核心的概念，这也就是告诉我们的开发者，Vue是一个渐进式的框架，我们的使用状态去管理和操作我们的DOM，改变我们的UI，不是使用过去的那种直接操作DOM的方式。所以说State是我们VUEX里面的一个核心的概念，他在VUEX里面也是一个核心的概念。

State是唯一的数据源，也就是它是唯一的载体，我们需要把任何一个需要抽取出来的变量，都要放到我们的State里面去来进行管理，那么我们在任何一个页面都可以取到它。

单一的状态树，什么是单一的状态树，也是说我们通过定义一个store的实例，那么这个store实例里面只有一个State，单一的状态树，它不像我们的Vue组件里面还可以嵌套另一个组件，另一个组件里面还可以嵌套N的组件，这样它是一个很有层级的关系的东西；  
但是我们这个VUEX，其实很单一，它就是一棵树，这棵树这个store对象只要注册到我们的main.js里面，只要被我们的vue注册之后，vue里面所有层级关系的组件都可以使用，它是比较单一的一颗状态树。  
我们看下列组件，这是一个定时器的组件，他里面包括一个模板，我们可以看到模板里面用到count这么一个属性，我们可以看到它里面有个computed的计算属性，这个computed计算属性也就是说，当我们里面的变量发生变化了以后，它都会时时的进行计算，最后来渲染我们的视图。  
我们可以看到它里面定义了count这么一个函数，computed里面必须都是函数，在计算属性里面它每个字段对应的都是函数，我们模板里面的count对应就是computed里面的count方法；当模板里面的count发生变化的时候，computed里面的count就会时时计算，计算完了就渲染到模板对应的位置。  
![在这里插入图片描述][20190317000608902.png]  
State是唯一的数据源，也就是说唯一的载体，只要通过import导入vuex;然后通过vue.use我们的vuex，我们就是可以通过this.store拿到我们的vuex的对象,.state就是我们vuex里面定义的属性，它唯一的数据源,我们任何的状态都必须定义到我们的stort里面去,count就是我们状态下挂的一个属性,我们就是使用这种方式去使用vuex里面的状态.  
**接下来，我们看看第二个，Getters**  
通过Getters可以派生出一些新的状态；我们看下面的例子：  
我们new一个vuex的实例，这种方式就是定义vuex的实例，  
![在这里插入图片描述][20190317001207489.png]  
我们再举一个例子，例如购物车的数量,大于99的时候，我们需要变成"99+"；这时候你仅仅定义一个state肯定是满足不了的；我们需要重新去延伸一个getters去做我们这样的一个操作；

**接下来我们来看一下Mutations:**  
更改Vuex的store中的状态的唯一方法是提交mutation  
我们看一下下列例子  
![在这里插入图片描述][20190317001416894.png]  
mutations里面只定义了函数，函数内部给值加1；但是需要有些地方去触发它  
![在这里插入图片描述][20190317001521539.png]  
比防说在我们的购物车列表页面,当我们加入购物车以后我们只需要调一下store.commit去提交increment;那我们的increment就会把购物车的数量++；每个页面里面购物车数量都会++；这就是我们mutations的功能；

**接下来我们来看下Actions:**  
Action提交的是mutation,而不是直接变更状态  
也就是说我们的状态值需要通过mutation来提交;那么mutation它可以通过Action来提交;  
Action可以包含冉义异步操作  
我们来看看下面的例子：  
![在这里插入图片描述][20190317001748953.png]  
所以说第一种就是在methods里面直接调用store.commit(‘increment’) 方法；第二种就是定义一个actions，通过这个actions来提交increment；

好像显得有点多余，确实有点多余；但是有一种场景它是不多余的；就是mutation的函数必须是同步的；而Action可以做任意异步的操作；

**最后我们来了解一下Modules**  
面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。  
下面我们来看一个例子：  
![在这里插入图片描述][20190317001926212.png]  
下面我们看一下Vuex的状态管理图;这里还是需要给大家解释一下;解释完之后，大家可能会对这个概念理解起来稍微更清晰一点；  
![在这里插入图片描述][20190317001953133.png]  
下面我们再来看看我们的项目结构:  
![在这里插入图片描述][20190317002023512.png]

[20190317000608902.png]: /images/20220307/5bd84aea814a432bbe1fcef847b3217e.png?
[20190317001207489.png]: /images/20220307/dcbe13090cd24f32a12d90da26835e24.png?
[20190317001416894.png]: /images/20220307/19ffebc1cffb4c70ae0d35b698573bf8.png?
[20190317001521539.png]: /images/20220307/4bc59c54112441868e077499bae92ec0.png
[20190317001748953.png]: /images/20220307/35fbfeb65ac84765a122499aabc57367.png?
[20190317001926212.png]: /images/20220307/a0a7b742e0714d82bf4bd2f4c7a96707.png?
[20190317001953133.png]: /images/20220307/f01b0dd1d991477a9ff1fd5bc9a6da7f.png?
[20190317002023512.png]: /images/20220307/efe67c86da54493790c45c5718ea81de.png?