vuex全家桶系列04-vuex模拟mock数据和显示

1.购物车的模拟数据:

项目目录下创建一个vue.config.js:

//vue.config.js
const products=[
    {
        id:1,
        title:"iphone12",
        price:1200,
        inventory:12
    },
    {
        id:2,
        title:"iphone12s",
        price:1400,
        inventory:12
    },
    {
        id:3,
        title:"iphone12Max",
        price:1600,
        inventory:12
    }
]
module.exports = {
    devServer:{
        before(app,serve){
            app.get("/api/products",(req,res)=>{
                res.json({
                    results:products
                })
            })
        }
    }
}

2.模拟数据的使用:

ProductList.vue组件的内容如下：

1. computed连接数据这部分就不细说了

2. name: "ProductList"这个是用来注册全局组件的时候使用的,下面2行代码用来注册全局组件的

   1. import ProductList from '@/components/ProductList'; Vue.component(ProductList.name,ProductList);

3. 在创建组件也就是created的时候，派发actions

4. 这里面用了全局过滤器-filter

   1. Vue.filter("currency",(values)=>{
       return "$" + values
      });
      

5. mian.js中的代码：

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   Vue.config.productionTip = false
   import ProductList from '@/components/ProductList';
   Vue.component(ProductList.name,ProductList);
   
   //全局注册一个过滤器
   Vue.filter("currency",(values)=>{
     return "$" + values
   });
   new Vue({
     router,
     store,
     render: h => h(App)
   }).$mount('#app')
   
   

<template>
<div>
    <h2>我是商铺组件啊</h2>
    <ul>
        <li v-for="(item) in products" :key="item.id">{{item.title}}-{{item.price | currency}}</li>
    </ul>
</div>
</template>

<script>
import {
    mapState
} from 'vuex';
export default {
    //组件名字用来注册全库组件时候使用
    name: "ProductList",
    created() {
        //发送请求
        this.$store.dispatch("products/getAllProducts")
    },
    computed: {
        ...mapState('products', ['products']),
    },
    mounted() {},
};
</script>

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

store/modules/product.js模块的的代码如下：

1. 引入axios然后发送请求，提交到mutations中去,页面渲染。

import axios from "axios"
export default {
    namespaced:true,
    state:{
        products:[]
    },
    mutations:{
        getAllProducts(state,products){
            state.products = products
        }
    },
    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);
            }      
        }
    }
}