vuex的拆分使用——模块化处理

浅浅的花香味﹌ 2021-07-25 18:25 483阅读 0赞

# vuex的拆分 #

随着项目越来越大，vuex中的内容也会越来越多，此时，将所有的store单一的存在一个js文件里面，在维护和使用的时候都不太方便。这个时候，需要将store拆分开，使用state/getters/mutations/actions单独管理。

#### 1. 创建目录 ####

在src目录下创建store文件夹和六个js文件，命名如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

#### 2.目录文件拆分详细 ####

state.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 default SET_COUMT = 'SET_COUMT'
    export default SET_COUMT_ADD = 'SET_COUMT_ADD'
    export default SET_COUMT_REDUCE = 'SET_COUMT_REDUCE'

mutations.js

import * as TYPES from "./types";
    const mutations = { 
    	[TYPES.SET_COUMT](state,v){ 
    		state.count = v;
    	},
    	[TYPES.SET_COUMT_ADD](state,v){ 
    		if(v){ 
    			state.count += v;
    		}else{ 
    			state.count ++
    		}
    	},
    	[TYPES.SET_COUMT_REDUCE](state,v){ 
    		if(v){ 
    			state.count -= v
    		}else{ 
    			state.count --
    		}
    	}
    }
    export defautl mutations

actions.js

import * as TYPES from "./types"
    const actions = { 
    	ADD1000(vuex){ 
    		vuex.commit('TYPES.SET_COUMT_ADD',1000)
    	},
    	REDUCE1000(vuex){ 
    		vuex.commit("TYPES.SET_COUMT_REDUCE",1000)
    	}
    }
    export default actions

index.js

import Vue from "vue";
    import Vuex from 'vuex';
    import state from './states';
    import getters from './getters';
    import mutations from './mutations';
    import actions from './actions';
    Vue.use(Vuex)
    export const store = new Vuex.Store({ 
    	state,
    	getters,
    	mutations,
    	actions
    })

到这里就拆分完了，调用方法还跟之前的一样，只是这样更容易维护，识别度更高。

#### 3. vuex的使用 ####

在main.js里引入store并初始化

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/9f04e71e24144655a18295ce48fb4028.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/1c72d093c70e4deda8fd7895225d5c0a.png