vuex全家桶系列07-商铺库存和购物车总价处理-下篇

1.products.js中的内容:

• 库存减少的处理

//store/modules/products.js

import axios from "axios"
export default {
    namespaced:true,
    state:{
        products:[]
    },
    mutations:{
        getAllProducts(state,products){
            state.products = products
        },
        //库存减少1处理
        decrementNum(state,{id}){
            const product = state.products.find(item => item.id == id);
            if(product.inventory >0){
                product.inventory--
            }
        }
    },
    actions:{
      async getAllProducts({commit}){
            //发送请求获取数据；提交mutations
            try {
               const res =await axios.get("/api/products");
               console.log(res); 
                const results = res.data.results;
                commit("getAllProducts",results);
            } catch (error) {
                console.log("我报错了",error);
            }      
        }
    }
}

2.shoppCart组件的内容

• 就是通过mapState和mapGetters完成映射

<template>
<div>
    我是购物车组件
    <ul>
        <li v-for="(item) in getCartList" :key="item.id">{{item.title}}--{{item.price}} X {{item.quantity}}</li>
    </ul>
    <div>总价格：{{cartTotalPrice | currency}}</div>
    <!-- {{getCartList}} -->
    <!-- <div>{{products}}</div>  -->
</div>
</template>

<script>
import {
    mapGetters,
    mapState
} from 'vuex';
export default {
    name: 'ShoppCart',
    computed: {
        ...mapState('products', ['products']),
        ...mapGetters('cart', ['getCartList', 'cartTotalPrice']),
    },
};
</script>

<style lang="scss" scoped>
</style>

3.补充下store中的index.js的内容:

• 引入了createLogger内置插件来完成数据的变化切面展示
• createLogger可以配置的哈，链接--：vuex.vuejs.org/zh/guide/pl…

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)

import test from"./modules/test";
import products from "./modules/products";
import cart from "./modules/cart";
export default new Vuex.Store({
  //这个是数据变化后的log插件，可以配置
  plugins: [createLogger()],
  state: {
    count:5201314,
    name:"linlin"
  },
  mutations: {
    add(state,data){
      state.count = state.count + data; 
    },
    decrease(state,{dmount}){
      state.count = state.count - dmount ;
    }
  },
  actions: {
    goAdd({commit},{amount}){
        commit("add",amount)
    }
  },
  //这里放着子模块
  modules: {
    test,
    products,
    cart
  }
})