vuex的拆分使用（详细）模块化处理

最新推荐文章于 2025-06-21 19:01:03 发布

@baby张

最新推荐文章于 2025-06-21 19:01:03 发布

阅读量8.3k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： VUE技术栈前端面试要点文章标签： vuex的调用——辅助函数mapState mapMutation vuex——快速入门——核心点——工作流程机制解决 Vue element ui 的table水平滚动条固定底部

本文链接：https://blog.youkuaiyun.com/weixin_43648947/article/details/88997946

本文介绍了如何在大型项目中拆分Vuex store，将state、getters、mutations、actions分别管理，以提高代码维护性和可读性。通过创建独立的js文件如states.js、getters.js等实现模块化，并在index.js中整合。同时，文章提到了不推荐使用vuex的module特性，推荐使用更直观的文件拆分方式。

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

你还不知道 vuex 如何使用？
vuex快速上上手链接：https://blog.youkuaiyun.com/weixin_43648947/article/details/88977281

当我们对vuex有了一定的了解之后发现随着项目越来越大，
将所有的store单一的存在一个js里显然维护和使用起来都不太方便，
这时候我们最好是将store拆分开，使state、getters、mutations、actions、都单独管理，
至于vuex提供的module，个人觉得层次多了页不太适合管理不推荐使用（个人见解）
一、安装好vue和vuex
用脚手架安装就好，不会的点一下

二、构建目录
在src目录下创建store文件夹,和六个js文件

文件名	用处
states.js	里面存放所有的state
getters.js	里面存放所有的state
mutations.js	里面存放所有的mutations
actions.js	里面存放所有的actions
types.js	里面存放所有的types，用来action和mutations的匹配
index.js	当然就是将上面的五个拆分的东西组合起来

在这里插入图片描述
三、目录文件拆分详细
states.js
项目中所有的共享state都放这儿

const state =  {
   
   
    count:0
}
export default state

getter.js

const getters =  {
   
   
    docount:(state,getters) => {
   
   
        return state.counts
    } 
}
export default getters

types.js

export const SET_COUMT = 'SET_COUMT'
export const SET_COUMT_ADD = 'SET_COUMT_ADD'
export const SET_COUMT_REDUCE = 'SET_COUMT_REDUCE'

mutations.js

import * as TYPES from './types';

const mutations = {
   
   
    [

最低0.47元/天解锁文章

200万优质内容无限畅学