element-ui后台管理系统学习(11)-vuex的引入与分模块

谁践踏了优雅 2021-08-02 17:25 301阅读 0赞

**第1步：安装**

npm install vuex --save

**第2步：新建src/store/index.js文件**

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state:{
    
        },
        mutations:{
    
        }
    })

**第3步：新建src/modules文件夹，新建src/modules/goods\_create.js用于管理商品创建相关管理**

export default {
    	state:{
    		skus_type:0,
    		title: "",
    		category: [],
    		desc:"",
    		unit:"",
    		stock:0,
    		min_stock:0,
    		display_stock:0,
    		status:0,
    		express:""
    	},
    	getters:{
    		
    	},
    	mutations:{
    		// 修改state
    		vModelState(state,{key,value}){
    			state[key] = value
    		}
    	},
    	actions:{
    		
    	}
    }

注意：这里mutatioins可以理解为methods，vModelState方法中**key表示传递的key，比如state.title。valiue表示赋值，实际上就是修改state.title的值**

**第4步：在src/store/index.js中引入**

import Vue from 'vue'
    import Vuex from 'vuex'
    import goods_create from './modules/goods_create' //引入使用
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        // 新增
        modules:{
            goods_create 
        }
    })

**第5步：在create.vue组件中引入，此时已经可以拿到数据了。**

computed: {
    			...mapState({
    				skus_type:state=>state.goods_create.skus_type,
    				title: state=>state.goods_create.title,
    				category: state=>state.goods_create.category,
    				desc:state=>state.goods_create.desc,
    				unit:state=>state.goods_create.unit,
    				stock:state=>state.goods_create.stock,
    				min_stock:state=>state.goods_create.min_stock,
    				display_stock:state=>state.goods_create.display_stock,
    				status:state=>state.goods_create.status,
    				express:state=>state.goods_create.express,
    			}),
    			// 其他计算属性
    		},

个人理解：在goods\_create.js中的mutations中的**VModelState**，在create.vue组件的中使用时，在methods中**...mapMutations(\['VModelState'\])**导入，然后便可以使用，传值方式与goods\_create.js中的mutations中的**VModelState一样，是对象\{key, value\}形式。**