Vue全家桶之VueX详解

傷城~ 2022-10-31 13:35 178阅读 0赞

VueX是什么？

VueX文档：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。**简单来说vuex就是对整体页面的数据传递进行管理。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
使用VueX的优点

1.  能够在vuex中集中管理共享的数据，易于开发和后期维护
2.  能够高效地实现组件之间的数据共享，提高开发效率
3.  存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到VueX当中？

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。

VueX的使用

首先我们还是使用vue-cli构建一个项目，项目构建参考：[VueCli 脚手架详解][VueCli]，项目构建好了之后，我们需要安装VueX

npm install vuex --save

安装之后在main.js文件当中添加vuex

import Vuex from 'vuex'
    Vue.use(Vuex)

我们在进行全局变量的管理需要使用到一个js文件进行存储，在这里我们在src目录下新建一个store.js文件，代码如下所示：在这里面的state当中储存的值就是全局变量值。

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
    	state: { 
    		count: 0
    	},
    	mutations: { },
    	actions: { }
    })
    
    //在定义vuex的时候还可以通过以下代码，效果一致，这样更好理解一点
    
    const store = new Vuex.Store({ 
    	state: { 
    		count: 0
    	},
    	mutations: { },
    	actions: { }
    })
    export default store

之后我们在其他组件如何获取到这个count全局的变量值呢？

1.  直接使用`this.$store.state.count` 即可获取到这个值
2.  从vuex当中按需导入mapState函数，之后通过导入的mapState函数，将当前组件所需的全局变量值进行映射给当前组件的computed计算  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]

Mutation修改全局变量的值（有参、无参）

在VueX当中不推荐组件对全局变量的值进行修改。而推荐使用Mutation变更Store中的数据。

1.  只能通过mutation变更Store数据，不可以直接操作Store中的数据。
2.  通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

如何实现呢？在前面的基础上，我们在store.js文件当中添加一个mutations块，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]  
mutations定义好了之后怎么使用呢？使用

this.$store.commit('方法名')

即可，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]  
并且在使用mutation当中还可以携带值进行操作，定义一个带参是mutation函数，

addN(state, step) { 
    			state.count += step
    		}

在使用的时候，使用commit携带一个参数给到addN

this.$store.commit('addN',3)

其中我们还可以使用mapMutations将函数映射进来使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4]  
action处理异步任务

在mutation同级目录下定义好这个actions对异步任务进行管理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5]  
而使用 `this.$store.dispatch("asyncAdd")` 即可调用这个actions的方法进行数据处理

而使用actions当中携带参数进行处理，和mutations的处理方式同理，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6]  
而在进行调用的时候我们也只需要加上一个参数即可，`this.$store.dispatch("asyncAddN",4)`

第二种方式进行获得actions进行映射  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 7]  
Getter数据加工

Getter用于对Store中的数据进行加工处理形成新的数据。

1.  Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2.  Store 中数据发生变化，Getter 的数据也会跟着变化。

getters的定义和state同级，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 8]  
使用getters的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 9]  
具体代码实现如下所示：包含两种方式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 10]  
VueX项目搭建案例分析与实现

首先我们还是有构建一个vue-cli项目进行开发，项目构建好之后，我们使用命令`npm install vuex --save` 添加vuex。之后启动项目。在这里我们可以使用vue ui 提供的ui界面导入我们所需的依赖。在vue-cli3 之后提供了这个ui。如果是vue-cli2 可以先将vue-cli卸载重新安装3版本，使用`vue ui` 命令打开，导入文件。

VueX和mixins

在vue当中提供了一个mixins混入，混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

当我们的vue文件当中存在很多定义的值，并且在多个界面当中使用，为了对代码进行简化，我们可以使用mixins混入。先使用一个js文件对需要进行混入的值进行定义  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 11]  
之后在vue文件当中进行导入，添加mixins混入即可进行使用了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 12]  
vuex和mixins的区别在于：

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

mixins 和 公共组件的区别在于：

与公共组件的区别

同样明显的区别来再列一遍哈~

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

[https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: /images/20221024/0ccd6a1e68e84118a3a03012cd5e40a5.png
[VueCli]: https://blog.csdn.net/qq_44973159/article/details/110817944
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: /images/20221024/c21af67a261e48e0b3b3d434ee6bd2b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 2]: /images/20221024/a7e03cafba7244e3a13f5702f37f9ace.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 3]: /images/20221024/04746fc4a1264e45b89a50db1c764046.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 4]: /images/20221024/6e94627fa21740979976ffdd8faa363d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 5]: /images/20221024/e970883b8313406080793146a5388c41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 6]: /images/20221024/8f60f605791f44b0849a81d542a4582a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 7]: /images/20221024/7ccbb42bc8d4458cbd8616a0f6792e2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 8]: /images/20221024/9d6621b0861541e98eb7249be5186346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 9]: /images/20221024/64cbf93fb67144d39393a1a0688e06f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 10]: /images/20221024/19817e2d7b8f4991b378b396ec33c5dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 11]: /images/20221024/94ec136aac0d46c6a74b358678f0479d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 12]: /images/20221024/b82d7cb1570d43dd88762c6233d5a926.png