【vue2第二十一章】vuex 分模块 module核心概念

谁借莪１个温暖的怀抱￠ 2023-10-16 14:08 28阅读 0赞

#### vuex module是什么？ ####

在Vuex中，module（模块）是将状态和相关逻辑封装在一起的一种方式。模块可以看作是Vuex状态的一部分，用于管理应用程序中特定的状态部分。

**使用模块化的方式，可以将Vuex的状态划分为多个模块，每个模块负责管理和维护特定的状态和相关操作。可以将模块看作是Vuex状态的子集，每个模块拥有自己的state、mutations、getters和actions等。**

一个模块可以包含以下内容：

*  state：模块的状态，类似于根状态的state，用于存储数据。
 *  mutations：用于修改或更新模块的状态。只能通过mutations来修改模块的状态，以保证状态的可追踪性和可维护性。
 *  getters：从模块的状态中获取派生数据，类似于根状态的getters。
 *  actions：用于处理异步操作或复杂的业务逻辑。在actions中可以调用mutations来修改模块的状态。  
    ![在这里插入图片描述][8b565c51440c49b0a530aa07a2be5ce7.png_pic_center]  
    使用模块可以将大型应用程序的状态分解为更小的模块，使代码更加结构化和可维护。模块化的设计还能够提高代码的可重用性和协作性，因为不同的开发人员可以独立地开发和维护各自的模块。

总之，Vuex的模块提供了一种组织和管理状态的方式，使得复杂应用程序的状态逻辑更清晰、可维护和可扩展。

***由于 vuex 使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时store 对象就有可能变得相当臃肿。(当项目变得越来越大的时候，Vuex会变得越来越难以维护)  
所以就有了分化模块，把一个复杂的store分为几个模块，每个模块负责自己的数据，比如user用户模块，goods商品模块等。***

#### vuex 分模块的好处？ ####

将Vuex状态分模块是为了更好地组织和管理大型应用程序的状态。随着应用程序的复杂性增加，状态可能会变得庞大而复杂，并且可能会有多个模块负责不同部分的状态。以下是为什么要将Vuex状态分模块的几个理由：

**1.代码组织**：将状态按模块划分可以使代码更加结构化和可维护。每个模块可以专注于处理特定部分的状态，使代码更易于理解和调试。

**2.模块化开发**：通过分模块，不同开发人员可以独立地开发和维护各自的模块。每个模块可以具有自己的状态、操作和变化逻辑，使开发过程更加高效和协同。

**3.可重用性**：分模块可以使某些状态逻辑和操作可在多个地方重用。这样可以减少代码的重复性，提高代码的可重用性和可扩展性。

**4.性能优化**：当应用程序状态变得庞大时，如果所有状态都放在单个模块中，可能会影响性能。通过分模块，可以将状态分散到不同的模块中，降低模块间的耦合性，从而提高性能。

综上所述，将Vuex状态分模块可以帮助我们更好地组织和管理应用程序的状态，以提高代码的可维护性、可重用性和性能优化。

#### 那如何进行模块的拆分呢？ ####

![在这里插入图片描述][8b130414a8c24461b1eca985ef587f40.png_pic_center]

1，首先得再store文件夹下创建一个module文件夹，其中再创建各自模块的js文件。如下图就创建了godds模块和user模块：  
![在这里插入图片描述][9059afa922814b5388cb747722c6c6b3.png_pic_center]  
2，其中user.js中写state，mutation，action，getter后并且导出：

const state = {
        
        userInfo:{
        
            name:"张三",
            age:"12"
        }
    }
    
    const mutations ={
        }
    const actions = {
        }
    const getters ={
        }
    export default {
        
        state,
        mutations,
        actions,
        getters
    }

其中goods.js中写state，mutation，action，getter后并且导出：

const state = {
        
        name:"旺旺大礼包",
        price:28.9
    }
    const mutations ={
        }
    const actions = {
        }
    const getters ={
        }
    export default {
        
        state,
        mutations,
        actions,
        getters
    }

3.最后再index.js中导入两个文件，并且将两个模块挂载到modules对象中。

import Vue from "vue";
    import Vuex from "vuex";
    import user from "./module/user";
    import goods from "./module/goods";
    
    Vue.use(Vuex);
    
    const store =new Vuex.Store({
        
        modules:{
        
            user,
            goods
        }
    });
    export default store;

最后打开浏览器使用插件查看vuex中确实挂载了两个模块分别时user和goods。  
![在这里插入图片描述][736f0f263ef44fe19e42db0801ae6031.png_pic_center]

#### 那如何使用模块中的数据呢（state）？ ####

###### .直接通过模块名访问`{ { $store.state.模块名.数据名 }}` 。 ######

<template>
      <div>
        {
       { $store.state.user.userInfo.name }}
      </div>
    </template>

###### .通过mapState映射访问。 ######

首先再需要访问得模块中设置namespaced：true

const state = {
        
        userInfo:{
        
            name:"张三",
            age:"12"
        }
    }
    const mutations ={
        }
    const actions = {
        }
    const getters ={
        }
    export default {
        
    //设置namespaced为true
        namespaced:true,
        state,
        mutations,
        actions,
        getters
    }

其次在使用得组件引入mapState，使用`...mapState('模块名称',['需要使用的数据名'])`

<template>
        <div>
          
          <p>{
       { userInfo }}</p>
        </div>
    </template>
      
    <script>
      import {
           mapState } from 'vuex';
    
      export default {
          
        computed:{
          
        //...mapState('模块名称',['需要使用的数据名'])
          ...mapState('user',['userInfo'])
        }
      }
     </script>`在这里插入代码片`

#### 那如何使用模块中的getter ####

![在这里插入图片描述][68b47045e20e4fafb3e933f6ad148cfa.png_pic_center]

###### 直接通过模块名称访问： ######

<template>
      <div>
      	{
       { $store.getters['user/getName'] }}
      </div>
    </template>

###### 通过mapGetters映射（需要开启命名空间）： ######

<template>
        <div>
         
          <p>{
       { getName }}</p>
    
        </div>
      </template>
      
      <script>
      import {
           mapGetters } from 'vuex';
    
      export default {
          
        computed:{
          
          ...mapGetters('user',['getName'])
        }
      }
      </script>

#### 如何使用模块中的mutations ####

![在这里插入图片描述][c7c71727d3bf4a2eaa5528b5ad9dea88.png_pic_center]

###### 直接通过store调用 `$store.commit('模块名/xxx',格外参数)` ######

const state = {
        
        userInfo:{
        
            name:"zs",
            age:"12"
        }
    }
    //添加mutations 中的更新逻辑
    const mutations ={
        
        setuserInfo(state,obj){
        
            state.userInfo = obj
        }
    }
    const actions = {
        }
    const getters ={
        
    }
    export default {
        
        namespaced:true,
        state,
        mutations,
        actions,
        getters
    }

添加组件的更新内容

<template>
      <div>
        {
       { $store.getters['user/getName'] }}
        <br>
        {
       { userInfo }}
        <button @click="gengxin">更新</button>
      </div>
    </template>
    
    <script>
    import {
           mapState } from 'vuex';
    
    export default {
          
      computed:{
          
        ...mapState('user',['userInfo']),
      },
      methods:{
          
      	//直接通过`$store.commit('模块名/xxx',格外参数)`更新数据
        gengxin(){
          
          this.$store.commit('user/setuserInfo',{
          
            name:'zhangsan',
            age:'222'
          })
        }
      }
    }
    </script>

###### 通过mapMutations映射 ######

user.js仓库代码还是一样，但是组件中就需要引入mapMutations ，引入之后在methods中进行子模块映射`...mapMutations('模块名',['映射的方法名'])`，后直接通过方法名调用

<template>
      <div>
        {
       { $store.getters['user/getName'] }}
        <br>
        {
       { userInfo }}
        
        <button @click="setuserInfo({ name:'zhangsan',age:'222'})">更新</button>
      </div>
    </template>
    
    <script>
    import {
           mapState,mapMutations } from 'vuex';
    
    export default {
          
      computed:{
          
        ...mapState('user',['userInfo'])
      },
      methods:{
          
      //子模块映射...mapMutations('模块名',['映射的方法名'])
        ...mapMutations('user',['setuserInfo'])
    
      }
    }
    </script>

#### 如何使用模块中的actions ####

![在这里插入图片描述][e126bb28128c40979a99675fe3dd6d35.png_pic_center]

###### 直接通过store调用 ######

需要在user仓库中写actions的方法逻辑。

const state = {
        
        userInfo:{
        
            name:"zs",
            age:"12"
        }
    }
    const mutations ={
        
        setuserInfo(state,obj){
        
            state.userInfo = obj
        }
    }
    
    const actions = {
        
        //新增方法逻辑
        setuserInfoActions(context,obj){
        
            setTimeout(()=>{
        
                context.commit('setuserInfo',obj)
            },1000)
        }
    }
    const getters ={
        
        getName(state){
        
            return state.userInfo.name.toUpperCase()
        }
    }
    export default {
        
        namespaced:true,
        state,
        mutations,
        actions,
        getters
    }

在组件中直接通过`this.$store.dispatch("模块名/方法名",参数)`进行调用（需要开启命名空间），

<template>
      <div>
        {
       { $store.getters['user/getName'] }}
        <br>
        {
       { userInfo }}
        <button @click="setuserInfo({ name:'zhangsan',age:'222'})">更新</button>
        <button @click="setuserInfoActions()">一秒后更新</button>
    
      </div>
    </template>
    
    <script>
    import {
           mapState,mapMutations } from 'vuex';
    
    export default {
          
      computed:{
          
        ...mapState('user',['userInfo'])
      },
      methods:{
          
        ...mapMutations('user',['setuserInfo']),
        //在组件中直接通过`this.$store.dispatch("模块名/方法名",参数)`进行调用
        setuserInfoActions(){
          
          this.$store.dispatch("user/setuserInfoActions",{
           name:'lisi',age:'3333'})
        }
      }
    }
    </script>

###### 直接通过mapActions映射 ######

在组件中通过 `mapActions('模块名',['方法名'])`映射方法，然后直接通过Actions中的方法名调用`方法名(参数)`

<template>
      <div>
        {
       { $store.getters['user/getName'] }}
        <br>
        {
       { userInfo }}
        <button @click="setuserInfo({ name:'zhangsan',age:'222'})">更新</button>
    	 
         <button @click="setuserInfoActions({ name:'lisi',age:'3333'})">一秒后更新</button>
    
      </div>
    </template>
    
    <script>
    import {
           mapState,mapMutations,mapActions } from 'vuex';
    
    export default {
          
      computed:{
          
        ...mapState('user',['userInfo'])
      },
      methods:{
          
        ...mapMutations('user',['setuserInfo']),
        //通过 `mapActions('模块名',['方法名'])`映射方法
        ...mapActions('user',['setuserInfoActions'])
      }
    }
    </script>

[8b565c51440c49b0a530aa07a2be5ce7.png_pic_center]: https://img-blog.csdnimg.cn/8b565c51440c49b0a530aa07a2be5ce7.png#pic_center
[8b130414a8c24461b1eca985ef587f40.png_pic_center]: https://img-blog.csdnimg.cn/8b130414a8c24461b1eca985ef587f40.png#pic_center
[9059afa922814b5388cb747722c6c6b3.png_pic_center]: https://img-blog.csdnimg.cn/9059afa922814b5388cb747722c6c6b3.png#pic_center
[736f0f263ef44fe19e42db0801ae6031.png_pic_center]: https://img-blog.csdnimg.cn/736f0f263ef44fe19e42db0801ae6031.png#pic_center
[68b47045e20e4fafb3e933f6ad148cfa.png_pic_center]: https://img-blog.csdnimg.cn/68b47045e20e4fafb3e933f6ad148cfa.png#pic_center
[c7c71727d3bf4a2eaa5528b5ad9dea88.png_pic_center]: https://img-blog.csdnimg.cn/c7c71727d3bf4a2eaa5528b5ad9dea88.png#pic_center
[e126bb28128c40979a99675fe3dd6d35.png_pic_center]: https://img-blog.csdnimg.cn/e126bb28128c40979a99675fe3dd6d35.png#pic_center