Vuex模块化深入浅出超详细

Java_慈祥

发布于 2024-08-10 14:07:27

1520

发布于 2024-08-10 14:07:27

文章被收录于专栏：Web前后端、全栈出发

Vuex 模块化

为什么需要模块化？ 随着项目规模的增长，单一的 store 文件会变得庞大且难以管理；

Vuex 的模块化是一种组织和管理应用状态的策略：，它允许将全局的状态管理分解成更小、更可管理的部分；

逻辑清晰： 将相关的状态、getter、mutation、action 分组，使得代码结构更加清晰；
命名空间： 避免不同模块间命名冲突，通过模块化可以为每个模块，提供一个唯一的命名空间，方便管理；
性能与维护： 模块化不仅提高了代码的可读性和可维护性，还能通过合理组织逻辑，间接提升应用的性能，尤其是在大型应用中，通过懒加载和按需导入模块，可以进一步优化资源加载；

模块化实现步骤：

创建模块文件： 在 store 目录下创建子目录，比如 modules 、在该目录下为每个模块创建单独的文件，如 modulediy.js

/** 自定义Vuex模块: 声明并对外暴漏 state、mutations、actions、getters */
const state = { userInfo: { name: 'zs', age: 18 }, }
const mutations = { }
const actions = { }
const getters = { }

export default { state, mutations, actions, getters }

src/store/index.js： 文件中的modules配置项中，导入、注册这个模块；

// 导入 vue、vuex
import Vue from 'vue'
import Vuex from 'vuex'
import modulediy from './modules/modulediy'		//导入用户模块

Vue.use(Vuex)

//创建仓库 store 状态,即数据: 
const store = new Vuex.Store({
    //注册模块
    modules:{
        modulediy,
    }
})

// 导出仓库 store
export default store

在组件中使用模块化状态： 创建Son4.vue组件—>组件内通过：$store.state.模块名.属性名 查看获取Vuex模块化数据；

<template>
    <div class="box">
        <h2>Son4 子组件</h2>
        从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>
        从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label>
    </div>
</template>

获取模块 state数据

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名，使用模块中的数据：

方式一： 直接通过模块名访问：$store.state.模块名.xxx
方式二： 通过 mapState 映射，注意：Vuex模块中需要开启命名空间 namespaced : true 默认根级别的映射 mapState([ '内部属性名','内部属性名','模块名' ]) 指定子模块的映射：mapState('模块名', ['模块内对应属性名xx'])

<template>
    <div class="box">
        <h2>Son4 子组件</h2>
        从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>
        从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>
        
        从vuex mapState中获取值: <label>{{ count }}</label><hr/>
        从vuex mapState中获取模块对象: <label>{{ modulediy }}</label><hr/>
        从vuex mapState 获取指定模块中获取的值: <label>{{ userInfo  }}</label><hr/>
    </div>
</template>
<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             
    export default { 
        //计算属性:
        computed:{
            ...mapState(['count','modulediy']),     //获取内部属性、modulediy模块对象;
            ...mapState('modulediy',['userInfo']),  //还支持直接获取指定模块内、属性对象;
        }
    }
</script>

获取模块 gatters数据

modules/modulediy.js： gatters 和 state操作类似：对于启用了命名空间的模块，支持使用 mapGetters 辅助函数时；

const state = { 
    userInfo: { name: 'zss', age: 18 }, 
    str:"自定义模块state属性" 
}
const getters = { 
    getstr(state){ return `年龄+1:${state.userInfo.age+1}` }
}
export default { 
    //开启命名空间
    namespaced : true,  
    state,
    getters
}

组件获取模块gatters数据：

方式一： 直接通过模块名访问 $store.getters['模块名/属性名']
方式二： 通过 mapGetters 映射，子模块的映射 mapGetters('指定模块名', ['模块内属性名'])

注意：Vuex模块中需要开启命名空间 namespaced : true

<template>
    <div class="box">
        <h2>Son4 子组件</h2>
        从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>
        从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>

        从vuex mapState中获取值: <label>{{ count }}</label><hr/>
        从vuex mapState中获取模块对象: <label>{{ modulediy }}</label><hr/>
        从vuex mapState 获取指定模块中获取的值: <label>{{ userInfo  }}</label><hr/>

        从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>
        从vuex modulediy 模块mapGetters中映射获取 <label>{{ getstr }}</label><hr/>
    </div>
</template>
<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             
    export default { 
        //计算属性: mapState 和 mapGetters 都是映射属性
        computed:{
            ...mapState(['count','modulediy']),     //获取内部属性、modulediy模块对象;
            ...mapState('modulediy',['userInfo']),  //还支持直接获取指定模块内、属性对象; 需要开启命名空间;
            //mapGetters中映射获取 子模块的映射
            ...mapGetters('modulediy',['getstr']),    
        }
    }
</script>

获取模块 mutations数据

Vuex模块化操作：mutations， 针对所在模块，对其state 状态数据，进行修改的操作；

定义模块的 Mutations： 和正常的Vuex中定义类似，如下：定义函数给模块内修改用户对象age值；

/** 自定义Vuex模块: 声明并对外暴漏 state、mutations、actions、getters */
const state = {  userInfo: { name: 'zss', age: 18 }, str:"自定义模块state属性" }
const getters = {  getstr(state){ return `用户虚岁: ${state.userInfo.age+1}` } }

const mutations = { 
    //接收两个参数: state(必须 状态数据) payload(可选 传递参数)
    upgradeAgeM(state,payload){ state.userInfo.age+=payload }
}
const actions = { }

export default { 
    namespaced : true,  //开启命名空间
    state,
    getters,
    mutations,
    actions,  
}

组件内使用：Vuex组件 Mutations：

方式一： 原生方式直接通过 store 调用：$store.commit('模块名/处理函数名', '传递参数')
方式二： 通过 mapMutations 辅助函数映射子模块：mapMutations('模块名',['处理函数名'])

推荐的方式是使用 mapMutations 辅助函数，它可以帮助你将模块的 mutations 映射到组件的方法中，需要开启命名空间

<template>
    <div class="box">
        <h2>Son5 子组件</h2>
        从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>
        从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>
        从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>
        直接调用:<button @click="upgradeAge(1)" >给modulediy模块用户age+1</button><hr/>
        mapMutations调用:<button @click="upgradeAgeM(-1)" >给modulediy模块用户age-1</button><hr/>
    </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             
    export default { 
        // mapMutations 和 mapActions 都是映射方法
        methods: {
            //原生方式调用Vuex组件: 给用户添加年龄;
            upgradeAge(n){ this.$store.commit('modulediy/upgradeAgeM',n) },
            //mapMutations 子模块映射至methods 获取模块函数;
            ...mapMutations('modulediy',['upgradeAgeM']),
        }
    }
</script>

获取模块 action数据

Vuex 组件action： 只要是针对组件的，mutations 进行异步操作扩展，本质和mutations 操作类似；

定义模块的 action： 如下：内部调用mutations 修改age函数，给其加上异步延迟的操作；

const actions = { 
    //actions处理异步: 不能直接操作state 还需要context.commit('mutation名','传参');
    upgradeAgeMSync(context,num){ setTimeout(() => { context.commit('upgradeAgeM', num) }, 1000)  }
}

组件内使用：Vuex组件 action：

方式一： 原生方式直接通过 store 调用：$store.dispatch('模块名/处理函数名', '传递参数')
方式二： 通过 mapActions 辅助函数映射子模块：mapActions('模块名',['处理函数名'])

<template>
    <div class="box">
        <h2>Son5 子组件</h2>
        从vuex中获取的值: <label>{{  $store.state.count  }}</label><hr/>
        从vuex modulediy 模块中获取的值: <label>{{  $store.state.modulediy.userInfo  }}</label><hr/>
        从vuex modulediy 模块getters中直接获取 <label>{{ $store.getters['modulediy/getstr'] }}</label><hr/>
        直接调用:<button @click="upgradeAge(1)" >给modulediy模块用户age+1</button><hr/>
        mapMutations调用:<button @click="upgradeAgeM(-1)" >给modulediy模块用户age-1</button><hr/>
        <br/>
        直接调用:<button @click="upgradeAgeSync(1)" >延迟给modulediy模块用户age+1</button><hr/>
        mapActions调用:<button @click="upgradeAgeMSync(-1)" >延迟给modulediy模块用户age+1</button><hr/>
    </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';             
    export default { 
        // mapMutations 和 mapActions 都是映射方法
        methods: {
            //原生方式调用Vuex mutations组件: 给用户添加年龄;
            upgradeAge(n){ this.$store.commit('modulediy/upgradeAgeM',n) },
            //mapMutations 子模块映射至methods 获取模块函数;
            ...mapMutations('modulediy',['upgradeAgeM']),

            //原生方式调用Vuex actions组件: 延迟给用户添加年龄;
            upgradeAgeSync(n){ this.$store.dispatch('modulediy/upgradeAgeMSync',n) },
            //mapActions 子模块映射至methods 获取模块函数;
            ...mapActions('modulediy',['upgradeAgeMSync']),
        }
    }
</script>