Vuex略解之Modules模块化以及mapGetters mapActions和mapState

最新推荐文章于 2025-03-15 10:03:34 发布

lengbling

最新推荐文章于 2025-03-15 10:03:34 发布

阅读量5k

点赞数 3

分类专栏： Vue 文章标签： Vuex Vue js 前端

本文链接：https://blog.csdn.net/lengbling/article/details/103478979

版权

本文介绍了Vuex的Modules模块化管理，通过创建独立的状态文件来管理不同部分的状态。讲解了如何设置namespaced以区分不同模块，并在组件中使用mapState、mapGetters和mapActions来访问和操作状态。同时，通过实例展示了如何在组件中触发actions并传递参数，实现状态的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为在大多数的项目中，我们对于全局状态的管理并不仅仅一种情况的需求，有时有多方面的需求，比如写一个商城项目，你所用到的全局state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的；像这样的情况我们就要考虑使用vuex中的 modules 模块化了，具体怎么使用modules呢？咱们继续一步一步的走：

首先，在store文件夹下面新建一个modules文件夹，然后在modules文件里面建立需要管理状态的js文件，既然要把不同部分的状态分开管理，那就要把它们给分成独立的状态文件了，如下图：

而对应的store文件夹下面的index.js 里面的内容就直接改写成：

import Vue from 'vue';

import Vuex from 'vuex';

import footerStatus from './modules/footerStatus'

import collection from './modules/collection'

Vue.use(Vuex);



export default new Vuex.Store({

    modules:{

         footerStatus,

         collection

    }

});

相应的js，其中的 namespaced:true 表示当你需要在别的文件里面使用( mapGetters、mapActions 接下来会说 )时，里面的方法需要注明来自哪一个模块的方法:

//collection.js

const state = {

  collects: [], //初始化一个collects数组

}

const getters = {

  renderCollects (state) {//承载变化的collects

    return state.collects

  }

}

const mutations = {

  pushCollects (state,items) {

    //如何变化collects 插入items

    state.collects.push(items)

  }

}

const actions = {

  involePushItems (context,item) {

    //触发mutations里面的pushCollects，传入数据形参item 对应到items

    context.commit('pushCollects',item)

  }

}



export default {

  namespaced: true,// 用于在全局引用此文件里的方法时标识这一个的文件名

  state,

  getters,

  mutations,

  actions