1）安装mockjs
官网：
文档：/nuysoft/Mock/wiki/Getting-Started
/examples.html
cnpm install mockjs --save
2）创建目录/文件
2.1使用mockjs形成数据src/mock/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})// export default ??? 不需要向外暴露任何数据, 只需要保存能执行即可
2.2引入，用于打包编译src/main.js
// 入口文件import Vue from 'vue'import App from './App'import router from './router/index.js'import store from './store' //引入vuex管理状态import {Button} from 'mint-ui'import './mock/mockServer' // 【1】加载mockServer即可// 注册全局组件ponent(Button.name, Button)// 2.0新版本es6写法new Vue({el: '#app',render: h => h(App),router,store})/*//1.0版写法new Vue({el: '#app',components: { App },template: '<App/>'})*/
2.3mock/data.json
据页面设计稿写出数据结构，一层示例
{"info": {"name": "嘉禾一品（温都水城）","description": "硅谷专送","deliveryTime": 28,"score": 4.2,"serviceScore": 4.1,"foodScore": 4.3,"rankRate": 69.2,"minPrice": 20,"deliveryPrice": 4,"ratingCount": 24,"sellCount": 90,"distance": "1000m","bulletin": "是以粥为特色的中式营养快餐，自10月18日创立“嘉和一品”品牌至今，不断优化管理，积极创新，立足于“贴近百姓生活，服务千家万户”","supports": [{"type": 0,"name": "首单","content": "新用户下单立减17元(不与其它活动同享)"},],"category": "包子粥店, 简餐","phone": "18501083744","address": "北京市丰台区太平桥44号","workTime": "09:35-24:00"},"goods": [{"name": "优惠","icon": "/b/91/8cf4f67e0e8223931cd595dc932fepng.png","foods": [{"name": "南瓜粥","price": 9,"oldPrice": "","description": "甜粥","sellCount": 91,"rating": 100,"info": "主、辅料:水、大米、南瓜、冰糖等","ratings": [{"username": "3******c","rateTime": 1469281964000,"rateType": 0,"text": "很喜欢的粥","avatar": "http://static./static/tms/default_header.png"},]]"ratings": [{"username": "3******c","rateTime": 1469281964000,"deliveryTime": 30,"score": 5,"rateType": 0,"text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.","avatar": "http://static./static/tms/default_header.png","recommend": ["南瓜粥","皮蛋瘦肉粥","扁豆焖面","娃娃菜炖豆腐","牛肉馅饼"]},]}
3）ajax请求 api/index.js
//获取mockjs模拟的后端商家数据export const reqShopGoods=()=>ajax('/shop_goods') //食物列表 不加api，此请求不从代理走export const reqShopRating=()=>ajax('/shop_rating') //评价列表export const reqShopInfo=()=>ajax('/shop_info') //商家信息
4）vuex状态相关store/
4.0 state.js 状态保存
export default{...略过goods: [], // 【1】商品列表ratings: [], // 【2】商家评价列表info: {}, // 【3】商家信息}
4.1 mutation-types.js 改变类型-方便维护
export const RECEIVE_GOODS = 'receive_goods' // 【1】接收商品数组export const RECEIVE_RATINGS = 'receive_ratings' // 【2】接收商家评价数组export const RECEIVE_INFO = 'receive_info' // 【3】接收商家信息
4.3 mutations.js 改变状态
import {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USER_INFO,RESET_USER_INFO,//【1】商家相关以下3个RECEIVE_INFO,RECEIVE_RATINGS,RECEIVE_GOODS,} from './mutation-types.js'export default{//中括号为计算属性名es6语法：作用是动态的写出当前函数名，方便后期维护...//【2】商家相关以下三个[RECEIVE_INFO](state,{info}){state.info=info},[RECEIVE_RATINGS](state,{rating}){state.rating=rating},[RECEIVE_GOODS](state,{goods}){state.goods=goods}}
4.4 actions.js 触发mutation
知识点：action的 callback参数
async getShopRatings({commit}, callback) {
…
// 【新知识点】数据更新了, 通知一下组件
callback && callback()
},
// 控制mutationsimport {RECEIVE_ADDRESS,RECEIVE_CATEGORYS,RECEIVE_SHOPS,RECEIVE_USER_INFO,RESET_USER_INFO, //退出mutaion-typesRECEIVE_INFO,//【1】以下3个商家相关RECEIVE_RATINGS,RECEIVE_GOODS,} from './mutation-types.js'import {reqAddress,reqFoodCategorys,reqShops,reqUserInfo, //获取session的用户信息reqLogout, //退出登录reqShopGoods,// 【2】以下3个商家相关请求reqShopRating,reqShopInfo,} from '../api/index.js'export default{//获取地址用于改变状态async getAddress({commit,state}){//构造纬,经度参数用于请求const geohash=state.latitude+','+state.longitudeconst result=await reqAddress(geohash)// 提交一个状态改变if(result.code===0){const address=result.data//提交mutation，commit(对象名,对象值)commit(RECEIVE_ADDRESS,{address})}},...略过//【3】商家信息async getShopInfo({commit}){const result=await reqShopInfo()if(result.code==0){const info=result.datacommit(RECEIVE_INFO,{info})}},// 【4】异步获取商家评价列表async getShopRatings({commit}, callback) {const result = await reqShopRatings()if (result.code === 0) {const ratings = result.datacommit(RECEIVE_RATINGS, {ratings})// 【新知识点】数据更新了, 通知一下组件callback && callback()}},//【5】 异步获取商家商品列表async getShopGoods({commit}, callback) {const result = await reqShopGoods()if (result.code === 0) {const goods = result.datacommit(RECEIVE_GOODS, {goods})// 数据更新了, 通知一下组件callback && callback()}},}
5）src/pages/shop/shop.vue 用vuex的action发起ajax请求并触发mutation，再把数据放入state中
<script>import ShopHeader from '../../components/ShopHeader/index.vue'export default{mounted(){//【1】调用action发ajax请求，并放入vuex//getShopInfo源自actions.js函数名this.$store.dispatch('getShopInfo')},components:{...略过}}</script>
效果：http://localhost:8080/#/shop/goods
查看vue开发者插件中info信息：
