三十、【vue面试题】h5购物车详细解析vuex（2021/5/2）

怼烎@ 2023-01-18 09:10 11阅读 0赞

> 获取state的状态的值

computed:{ 
            goods(){ 
                    return this.$store.state.goods
            },
            totalNum(){ 
                    return this.$store.state.totalNum
            },
            totalPrice(){ 
                    return this.$store.state.totalPrice
            }
    }

> 优化以上代码显示

import { mapState} from 'vuex'
    computed:{ 
            ...mapState([
                    'goods',
                    'totalNum',
                    'totalPrice'
            ])
    }

> getters对数据进行处理：

//getters.js
    export default { 
            goodsObj:state =>{ 
                    return state.goods
            },
            getById:(state) => (id) =>{  //返回一个函数
                    return state.goods.filter((item)=>{  (item.id - 0) === id}) //这里的减0操作是让字符串转换为数字
            }
    }
    
    created:{ 
            console.log(this.$store.getters.getById(2))
    }

> mutation使用

//mutation.js
    export default{ 
    	increment(state,index){ 
    	        state.goods[index].num ++;
    	}
    }
    method:{ 
    	// 商品个数添加
    	handleAdd(index){ 
    	        this.$store.commit('increment',index)
    	}
    }

> 使用mapMutations优化写法

// 使用mapMutations
    ...mapMutations({ 
            handleAdd:'increment'
    })

注意：以上mapMutations的写法参数需要以对象的格式传递

> action的写法

// action.js
    increment(context){ 
            context.commit('increment')
    }
    // 解构的写法
    import { } from './mutations-type'
    increment({ 
            commit
    }){ 
            commit(ADD)
    }

> actions传参的写法：

increment({ 
            commit
    },payload){ 
            commit(ADD,payload.index)
    }
    //.vue文件调用
    methods:{ 
            handleAdd(index){ 
                    this.$store.dispatch({ 
                            type:'increment',
                            index
                    })
            }
    }