vue實(shí)戰(zhàn)（10）：開發(fā)店鋪詳情（一）

認(rèn)真學(xué)習(xí)的樣子

登錄部分完成的比較撲街舵鳞，本篇開始做店鋪的詳情頁面,而這里的數(shù)據(jù)使用mock

0. 其它

1. 安裝 mockjs 與設(shè)計(jì)數(shù)據(jù)

Mockjs：用來攔截 ajax 請求, 生成隨機(jī)數(shù)據(jù)返回

前端可以使用 mockjs 來自己做一些數(shù)據(jù)，而不用等待后端開發(fā)人員的接口男韧，當(dāng)然數(shù)據(jù)結(jié)構(gòu)是需要與后端開發(fā)人員制定好的朴摊。
鏈接：mockjs官網(wǎng)
在項(xiàng)目中安裝引入
npm install mockjs --save
設(shè)計(jì)數(shù)據(jù)
創(chuàng)建 mock 文件夾，并創(chuàng)建 data.json 文件與 mockServer.js 文件煌抒；
data.json 文件為數(shù)據(jù)文件仍劈；
mockServer.js 文件為應(yīng)用數(shù)據(jù)文件；

/*
mockServer.js
使用mockjs提供mock數(shù)據(jù)接口
 */
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. 創(chuàng)建模塊與路由

創(chuàng)建模塊
在 views 文件夾下創(chuàng)建 Shop 文件夾并創(chuàng)建 ShopHeader.vue 文件寡壮，為商鋪內(nèi)容贩疙；
在 Shop 文件夾下創(chuàng)建 Goods 文件夾并創(chuàng)建 Goods.vue 文件，為商品內(nèi)容况既；
在 Shop 文件夾下創(chuàng)建 Info 文件夾并創(chuàng)建 Info.vue 文件这溅，為店鋪活動(dòng)等內(nèi)容；
在 Shop 文件夾下創(chuàng)建 Ratings 文件夾并創(chuàng)建 Ratings.vue 文件棒仍，為評價(jià)內(nèi)容悲靴；
創(chuàng)建頭部模塊
在 components 文件夾下創(chuàng)建 ShopTop 文件夾并創(chuàng)建 ShopTop.vue 文件，為商鋪頭部莫其；
創(chuàng)建相應(yīng)路由

   {
      path: '/shopheader', // 店鋪詳情
      component: ShopHeader,
      children: [
        {
          path: '/goods', // 內(nèi)容
          component: Goods
        },
        {
          path: '/info', // 活動(dòng)公告
          component: Info
        },
        {
          path: '/ratings', // 評價(jià)
          component: Ratings
        },
        {
          path: '',
          redirect: '/goods' // 默認(rèn)
        }
      ]
    }

ShopList.vue 添加點(diǎn)擊事件
在列表上添加點(diǎn)擊事件癞尚，可以跳轉(zhuǎn)詳情頁面 @click="$router.push('/ShopHeader')"
目錄結(jié)構(gòu)

目前目錄結(jié)構(gòu)

3. 頁面搭建與創(chuàng)建請求

搭建 HTML 與 css

商店頭部部分
創(chuàng)建請求
1）創(chuàng)建 ajax 請求

     /**
   * 獲取商家信息
   */
  export const reqShopInfo = () => ajax('/info')
  /**
   * 獲取商家評價(jià)數(shù)組
   */
  export const reqShopRatings = () => ajax('/ratings')
  /**
   * 獲取商家商品數(shù)組
   */
  export const reqShopGoods = () => ajax('/goods')

2）在 vuex 中請求數(shù)據(jù)
與前面的請求數(shù)據(jù)方式相同，直接在原本的方法下面補(bǔ)充新方法

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

const state = {
  goods: [], // 店鋪商品
  ratings: [], // 評價(jià)
  info: {} // 店鋪信息
}

const mutations = {
  RECEIVE_GOODS: (state, { goods }) => { // 店鋪商品
    state.goods = goods
  },
  RECEIVE_INFO: (state, { info }) => { // 店鋪信息
    state.info = info
  },
  RECEIVE_RATINGS: (state, { ratings }) => { // 評價(jià)
    state.ratings = ratings
  }
}

const actions = {
  // 異步獲取商家信息
  async getShopInfo ({ commit }) {
    const result = await reqShopInfo()
    if (result.code === 0) {
      commit('RECEIVE_INFO', { info: result.data })
    }
  },
  // 異步獲取商家評價(jià)列表
  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
}

應(yīng)用數(shù)據(jù)
1）請求數(shù)據(jù)方法完成乱陡，到頁面中看一下是否能獲取到
在 ShopHeader.vue 頁面引用import { mapActions } from 'vuex'浇揩，
然后mounted () { this.getShopInfo() }, methods: { ...mapActions('msite', ['getShopInfo']) }。
2）在 ShopTop.vue 頁面引用import { mapState} from 'vuex'憨颠，
然后computed: { ...mapState('msite', ['info']) }胳徽，
最后把得到的數(shù)據(jù)賦值到相應(yīng)的位置。

數(shù)據(jù)獲取成功
$\color{red}{一個(gè)小坑}$
一開始在獲取數(shù)據(jù)的時(shí)候報(bào)錯(cuò)了[vuex] unknown action type: msite爽彤，百度了半天也沒有解決养盗，原因是根據(jù)視頻里面，在 ShopHeader.vue 頁面方法寫的是mounted () { this.$store.dispatch('msite',['getShopInfo']) }'這樣的适篙，講道理應(yīng)該是沒有問題的往核，但是就是報(bào)錯(cuò)了，還是改用上面的方式就好了嚷节。

4. 結(jié)束

本篇結(jié)束聂儒，下面是頁面上的tab切換部分蝶缀，也就是3個(gè)子路由的頁面。

點(diǎn)個(gè)贊唄薄货！