第4章 Vue全家桶(vue-router+vuex) - 4.22 模拟mock数据和商铺数据显示13步骤

本文要结合下面几篇文章才能串起来：

第4章 Vue全家桶(vue-router+vuex)- 4.17 vuex的其本使用8步骤

第4章 Vue全家桶(vue-router+vuex)- 4.18 为什么要使用actions

第4章 Vue全家桶(vue-router+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用

第4章 Vue全家桶(vue-router+vuex) - 4.19 Vuex系列的辅助函数的运用——mapState,mapGetters,mapMutations,mapActions

第4章 Vue全家桶(vue-router+vuex) - 4.20 如何在组件内部提交数据给vuex共3步骤

第4章 Vue全家桶(vue-router+vuex) - 4.21 使用vuex的模块化构建购物车步骤 

项目目录如下：

 模拟mock数据和商铺数据显示13步骤

目录

 模拟mock数据和商铺数据显示13步骤

---

模拟mock数据和商铺数据显示第1步：在根目录下的vue.config.js里面设置api.
模拟mock数据和商铺数据显示第2步：在根目录下的vue.config.js里面声明products。
模拟mock数据和商铺数据显示第3步：在ProductList.vue里面展示。
模拟mock数据和商铺数据显示第4步：在ProductList.vue里面导入mapState。
模拟mock数据和商铺数据显示第5步：在ProductList.vue里面设置mapState方法。
模拟mock数据和商铺数据显示第6步：在ProductList.vue里面created方法。
模拟mock数据和商铺数据显示第7步：在products.js里面设置actions方法。
模拟mock数据和商铺数据显示第8步：在products.js里面导入axios。
模拟mock数据和商铺数据显示第9步：在products.js里面通过axios获取products数据。
模拟mock数据和商铺数据显示第10步：在products.js里面设置mutations方法。
模拟mock数据和商铺数据显示第11步：在main.js里面注册全局过滤器。
模拟mock数据和商铺数据显示第12步：在main.js里面注册全局组件。此操作前需要先备注掉About.vue里面两处导入和挂载ShoppingCart。
模拟mock数据和商铺数据显示第13步：在main.js里面挂载ShoppingCart.

每一步操作，在相应的代码里面都有备注。

第1步：在根目录下的vue.config.js里面设置api.

第2步：在根目录下的vue.config.js里面声明products。

const { defineConfig } = require('@vue/cli-service')

const products = [  //4.22 模拟mock数据和商铺数据显示第2步：在根目录下的vue.config.js里面声明products。
  { id: 1, title: 'iphone11', price: 800, inventory: 10 },
  { id: 2, title: 'iphone11 pro', price: 1200, inventory: 15 },
  { id: 3, title: 'iphone11 max', price: 1500, inventory: 5 },
]

module.exports = {  //4.22 模拟mock数据和商铺数据显示第1步：在根目录下的vue.config.js里面设置api.
  devServer:{
    before(app,serve) {
      app.get('/api/products', (req, res) => {
        res.json({
          results:products
        })
      })
    }
  }
}

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,  //检查命名规范
})

模拟mock数据和商铺数据显示第3步：在ProductList.vue里面展示。
模拟mock数据和商铺数据显示第4步：在ProductList.vue里面导入mapState。
模拟mock数据和商铺数据显示第5步：在ProductList.vue里面设置mapState方法。
模拟mock数据和商铺数据显示第6步：在ProductList.vue里面created方法。

ProductList.vue代码： 

// ProductList.vue内容

<template>
    <div>
        <h2>我的商铺</h2>
        <ul>    <!-- //4.22 模拟mock数据和商铺数据显示第3步：在ProductList.vue里面展示。 -->
            <li v-for="(product) in products" :key="product.id">
                {{product.title}} - {{product.price | currency}}    <!-- //4.22 模拟mock数据和商铺数据显示第12步：使用过滤器currency -->
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';    //4.22 模拟mock数据和商铺数据显示第4步：在ProductList.vue里面导入mapState。
    export default {
        computed: {     //4.22 模拟mock数据和商铺数据显示第5步：在ProductList.vue里面设置mapState方法。
            ...mapState('products',['products'])
        },
        created () {    //4.22 模拟mock数据和商铺数据显示第6步：在ProductList.vue里面created方法。
            this.$store.dispatch('products/getAllProducts');
        }
    }
</script>

<style lang="scss" scoped>

</style>

第7步：在products.js里面设置actions方法。
第8步：在products.js里面导入axios。
第9步：在products.js里面通过axios获取products数据。
第10步：在products.js里面设置mutations方法。

products.js代码：

// products.js内容

import Axios from 'axios'   //4.22 模拟mock数据和商铺数据显示第8步：在products.js里面导入axios。
export default {
    namespaced:true,    //4.21 使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
    state:{
        products: []    //4.21 使用vuex的模块化构建购物车第5步:在products.js里面添加products.    
    },
    getters:{

    },
    mutations:{
        getAllProducts(state,products){     //4.22 模拟mock数据和商铺数据显示第10步：在products.js里面设置mutations方法。
            state.products = products
        }
    },
    actions:{   
        async getAllProducts({commit}){   //4.22 模拟mock数据和商铺数据显示第7步：在products.js里面设置actions方法。
            //发送请求 获取数据 提交mutations
            try {   //4.22 模拟mock数据和商铺数据显示第9步：在products.js里面通过axios获取products数据。
                const res = await Axios.get('/api/products');
                const results = res.data.results;
                commit('getAllProducts',results);
            } catch (error) {
                console.log(error);
            }
        }
    }
}

第11步：在main.js里面注册全局过滤器。
第12步：在main.js里面注册全局组件。此操作前需要先备注掉About.vue里面两处导入和挂载ShoppingCart。
第13步：在main.js里面挂载ShoppingCart.

main.js代码：

// main.js内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入创建的store
import store from './store'
Vue.config.productionTip = false
//注册全局组件的方式
import ShoppingCart from '@/components/ShoppingCart';   //4.22 模拟mock数据和商铺数据显示第12步：在main.js里面注册全局组件。
Vue.component(ShoppingCart.name, ShoppingCart)  //4.22 模拟mock数据和商铺数据显示第13步：在main.js里面挂载ShoppingCart.

//全局注册过滤器
Vue.filter('currency',(value)=>{  //4.22 模拟mock数据和商铺数据显示第11步：在main.js里面注册全局过滤器
  return '$' + value;
})

new Vue({
  router,
  //一定要挂载
  store,
  render: h => h(App)
}).$mount('#app')

运行结果如下：