vue实战（10）：开发店铺详情（一）

认真学习的样子

登录部分完成的比较扑街，本篇开始做店铺的详情页面,而这里的数据使用mock

0. 其它

vue实战（1）：准备与资料整理
 vue实战（2）：初始化项目、搭建底部导航路由
 vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
 vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
 vue实战（5）：总结一
 vue实战（6）：异步显示数据、开发Star组件
 vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
 vue实战（10）：开发店铺详情（一）

1. 安装 mockjs 与设计数据

Mockjs：用来拦截 ajax 请求, 生成随机数据返回

前端可以使用 mockjs 来自己做一些数据，而不用等待后端开发人员的接口，当然数据结构是需要与后端开发人员制定好的。
链接：mockjs官网
在项目中安装引入
npm install mockjs --save
设计数据
创建 mock 文件夹，并创建 data.json 文件与 mockServer.js 文件；
data.json 文件为数据文件；
mockServer.js 文件为应用数据文件；

/*
mockServer.js
使用mockjs提供mock数据接口
 */
import Mock from 'mockjs'
import data from './data.json'

// 返回goods的接口
Mock.mock('/goods', { code: 0, data: data.goods })
// 返回ratings的接口
Mock.mock('/ratings', { code: 0, data: data.ratings })
// 返回info的接口
Mock.mock('/info', { code: 0, data: data.info })

在 main.js 中引用（这边的引用类似引用css文件）
import './mock/mockServer'

2. 创建模块与路由

创建模块
在 views 文件夹下创建 Shop 文件夹并创建 ShopHeader.vue 文件，为商铺内容；
在 Shop 文件夹下创建 Goods 文件夹并创建 Goods.vue 文件，为商品内容；
在 Shop 文件夹下创建 Info 文件夹并创建 Info.vue 文件，为店铺活动等内容；
在 Shop 文件夹下创建 Ratings 文件夹并创建 Ratings.vue 文件，为评价内容；
创建头部模块
在 components 文件夹下创建 ShopTop 文件夹并创建 ShopTop.vue 文件，为商铺头部；
创建相应路由

   {
      path: '/shopheader', // 店铺详情
      component: ShopHeader,
      children: [
        {
          path: '/goods', // 内容
          component: Goods
        },
        {
          path: '/info', // 活动公告
          component: Info
        },
        {
          path: '/ratings', // 评价
          component: Ratings
        },
        {
          path: '',
          redirect: '/goods' // 默认
        }
      ]
    }

ShopList.vue 添加点击事件
在列表上添加点击事件，可以跳转详情页面 @click="$router.push('/ShopHeader')"
目录结构

3. 页面搭建与创建请求

搭建 HTML 与 css
创建请求
1）创建 ajax 请求

     /**
   * 获取商家信息
   */
  export const reqShopInfo = () => ajax('/info')
  /**
   * 获取商家评价数组
   */
  export const reqShopRatings = () => ajax('/ratings')
  /**
   * 获取商家商品数组
   */
  export const reqShopGoods = () => ajax('/goods')

2）在 vuex 中请求数据
与前面的请求数据方式相同，直接在原本的方法下面补充新方法

import { // 引入
  reqShopInfo,
  reqShopRatings,
  reqShopGoods
  } from '../../api/index'

const state = {
  goods: [], // 店铺商品
  ratings: [], // 评价
  info: {} // 店铺信息
}

const mutations = {
  RECEIVE_GOODS: (state, { goods }) => { // 店铺商品
    state.goods = goods
  },
  RECEIVE_INFO: (state, { info }) => { // 店铺信息
    state.info = info
  },
  RECEIVE_RATINGS: (state, { ratings }) => { // 评价
    state.ratings = ratings
  }
}

const actions = {
  // 异步获取商家信息
  async getShopInfo ({ commit }) {
    const result = await reqShopInfo()
    if (result.code === 0) {
      commit('RECEIVE_INFO', { info: result.data })
    }
  },
  // 异步获取商家评价列表
  async getShopRatings ({ commit }) {
    const result = await reqShopRatings()
    if (result.code === 0) {
      commit('RECEIVE_RATINGS', { ratings: result.data })
    }
  },
  // 异步获取商家商品列表
  async getShopGoods ({ commit }) {
    const result = await reqShopGoods()
    if (result.code === 0) {
      commit('RECEIVE_GOODS', { goods: result.data })
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

应用数据
1）请求数据方法完成，到页面中看一下是否能获取到
在 ShopHeader.vue 页面引用import { mapActions } from 'vuex'，
然后mounted () { this.getShopInfo() }, methods: { ...mapActions('msite', ['getShopInfo']) }。
2）在 ShopTop.vue 页面引用import { mapState} from 'vuex'，
然后computed: { ...mapState('msite', ['info']) }，
最后把得到的数据赋值到相应的位置。
$color{red}{一个小坑}$
一开始在获取数据的时候报错了[vuex] unknown action type: msite，百度了半天也没有解决，原因是根据视频里面，在 ShopHeader.vue 页面方法写的是mounted () { this.$store.dispatch('msite',['getShopInfo']) }'这样的，讲道理应该是没有问题的，但是就是报错了，还是改用上面的方式就好了。

4. 结束

本篇结束，下面是页面上的tab切换部分，也就是3个子路由的页面。

点个赞呗！