vue——模块化的store文件(基础积累)

曾经终败给现在 2022-08-31 15:19 154阅读 0赞

最近在其他项目组又接触到了`vue-cli`搭建的项目，感觉自己都忘记怎么使用了。今天将`store`中的分模块的处理方式书写如下：

![在这里插入图片描述][ece9b06051d84ee09c699d2436e0892b.png]  
从目录结构中，可以看到`vuex`中的`state action getters mutations`都作为单独的文件存在。最后统一集合在`index.js`文件中。

## 1.`index.js`文件内容 ##

import Vue from "vue";
    import Vuex from "vuex";
    import actions from "./actions.js";
    import getters from "./getters.js";
    import mutations from "./mutations.js";
    import state from "./state.js";
    
    import persistedState from "vuex-persistedstate";
    //调式，开发模式开启严格模式，要使用mutations提交
    const debug = process.env.NODE_ENV !='production'
    Vue.use(Vuex);
    export default new Vuex.Store({ 
    	actions.
    	getters,
    	state,
    	mutations,
    	strict:debug,
    	plugins:[persistedState()],//vuex持续化存储，默认存储到localstorage
    })

## 2.`state.js`文件内容 ##

const state = { 
    	//下面的参数根据实际情况来处理
    	showUserCenterNotice:true,
    	currentPage:'/index',
    	userInfo:{ },
    	regionList:[],
    	cartCount:0
    }
    export default state;

## 3.`getters.js`文件内容 ##

const getters = { }
    export default getters

## 4.`mutations.js`文件内容 ##

import api from "@/api/api.js";//因为此部分经常需要调用接口，因此需要引入接口文件
    const mutations = { 
    	changeUserCenterRight(state,params){ 
    		state.showUserCenterNotice = params;
    	},
    	//退出
    	logout(state){ 
    		localStorage.removeItem('oldtime');
    		localStorage.removeItem('token');
    		localStorage.removeItem('expires');
    		state.userInfo = { };
    	},
    	//更新购物车数量
    	setCartList(state){ 
    		api.postShopCartsNum().then(res=>{ 
    			state.cartCount = res.data;
    		})
    	}
    }
    export default mutations

## 5.`actions.js`文件内容 ##

import api from "@/api/api"
    const actions = { 
    	getUserInfo({ commit},from){ 
    		api.getUserInfo().then(res=>{ 
    			if(res.data){ 
    				commit('changeUserInfo',res.data);
    				commit('setCartList',res.data);
    			}
    		})
    	}
    }
    export default actions

[ece9b06051d84ee09c699d2436e0892b.png]: /images/20220829/a6f40cadfebd4980869088ed4dc77079.png