vuex store状态管理随笔-技巧_[types.indexs](state,value){-优快云博客

本文详细介绍如何在Vue项目中采用模块化方式管理store状态，包括state管理、mutations、actions及getters的使用，有效提升代码维护性和团队协作效率。

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

desc:为了项目更好的维护管理，store状态也需要进行模块化管理，shopping、profession代表有两个不同模块，例如管理登录的用户信息，可以新建一个userInfo来管理

1、state.js 管理状态

export default {
    professional:{
        cabinTypes:["Y","S"]
    }

};

组件index.js computed获取值

//index.js
export default{
    data(){
    },
    computed:{
        cabinTypes(){
           return  this.$store.state.professional.cabinTypes //获取到值 ["Y","S"]
        },
    }

}

2、mutation-types.js 【提高代码耦合性太高，减少硬编码，团队开发时，对mutations统一管理，找函数很直观，可以不使用】

// 专业版显示/隐藏表头
export const UPDATE_CABINTYPES= 'UPDATE_CABINTYPES';

3、mutations.js ：更新state值的一些function,mutation 都是同步事务


import * as types from './mutations_types'

export default {
    //更新cabinTypes
    [types.UPDATE_CABINTYPES](state,value) {
      state.professional.cabinTypes= value;
    },
};

组件index.js updateCabinTypes 方法commit改变state里cabinTypes，value为接收到的新参数

//index.js
export default{
    data(){
    },
    computed:{
        cabinTypes(){
           return  this.$store.state.professional.cabinTypes //获取到值 ["Y","S"]
        },
    },
    methods:{
        updateCabinTypes(){
            this.$store.commit('UPDATE_CABINTYPES',["F","D"]);  
        }
    }

}

4、actions.js 处理异步方法 Action 通过 store.dispatch 方法触发：


export default {
    // 增加选择的信息
    add_selected_info: ({ commit }, { info }) => {
        return new Promise((resolve, reject) => {
            commit(types.ADD_SELECTED_INFO, info);
            resolve()
        });
    },
};

组件index.js add_selected_info方法，info为接收到的新参数

//index.js
export default{
    data(){
    },
    computed:{
        cabinTypes(){
           return  this.$store.state.professional.cabinTypes //获取到值 ["Y","S"]
        },
    },
    methods:{
        updateCabinTypes(){
            this.$store.commit('UPDATE_CABINTYPES',["F","D"]);  
        },
        add_selected_info(){
            this.$store.dispatch('add_selected_info',{id:1,name:'产品1'});  
        },
    }

}

5、getters.js 向外部抛出state 中派生出一些状态【简单说：加工state状态】

export default {
	getCabinTypesF(state) {
        return state.professional.cabinTypes.filter(it=>it=='F')
    },

组件index.js

//index.js
export default{
    data(){
    },
    computed:{
        cabinTypes(){
           return  this.$store.state.professional.cabinTypes //获取到值 ["Y","S"]
        },
        cabinTypesF(){
           return  this.$store.getters.cabinTypesF //获取到值 ["F"]
        },
    },
    methods:{
        updateCabinTypes(){
            this.$store.commit('UPDATE_CABINTYPES',["F","D"]);  
        }
    }

}