使用vue 实现外卖平台，饿了么美团模仿

可以搜索，可以添加到购物车，可以计算价格 

目录结构：

components（folder）

        meituan.vue

        store（folder）

               action.js

               mulation.js

               action.js

               index.js

 

 

 

 

这是主界面  meituan.vue

 路由 router  index.js

import Vue from "vue";
import Router from "vue-router";
import Meituan from "@/components/meituan"
Vue.use(Router);
export default new Router({
routes: [
{
      path: "/",
      component: Meituan

},

  ]
});

store里面的state.js 

class UserState {
    defaultState() {
        return {
            a:"",
            b:"",
            name:""
        }
    }
}
export default new UserState().defaultState()

这是store里面的mutation.js 

const UserMutation = {
  //数据存在zhe

    COMMITUSER(state, data = {}) {
        state.a = data.a
        state.b = data.b
        state.name=data.name

    },

}
export default UserMutation

这是store的index.js 

import UserState from '../store/state'
import UserAction from '../store/action'
import UserMutation from '../store/mutation'

const UserStore = {
    namespaced: true,
    state: UserState,
    actions: UserAction,
    mutations: UserMutation,
}


export default UserStore

这是模仿请求的数据，模拟一个接口

store.js里面的action.js 

import img1 from "../../img/1.jpg";
import img2 from "../../img/2.jpg";
import img3 from "../../img/3.jpg";
import img4 from "../../img/4.jpg";
import img5 from "../../img/5.jpg";
const UserAction = {
  getUserAction(store) {
    let data = {
      name:"鲜丰水果",
      a: [
        {
          name:"优惠",
          num:0,
          kind:0
        },
        {
          name:"水果",
          num:0,
          kind:1
        },
        {
          name:"干果",
          num:0,
          kind:2
        },
        {
          name:"鲜奶",
          num:0,
          kind:3
        },
        {
          name:"果切",
          num:0,
          kind:4
        },


    ],
      b: [
        {
          id:0,
          img: img1,
          title:"烟台苹果",
          price:0.1,
          num:69,
          kind:0,
          discount:0.2,
          originPrice:5,
          buynum:0


        },
        {
          id:1,
          img: img2,
          title:"柠檬",
          price:1,
          num:27,
          kind:0,
          discount:1,
          originPrice:10,
          buynum:0
        },
        {
          id:2,
          img: img3,
          title:"沙糖桔",
          price:4.99,
          num:63,
          kind:1,
          buynum:0
        },
        {id:3,
          img: img4,
          title:"香梨",
          price:2.5,
          num:56,
          kind:1,
          buynum:0
        },
        {
          id:4,
          img: img5,
          title:"猕猴桃",
          price:1.88,
          num:89,
          kind:1,
          buynum:0
        }

      ]
    };

    store.commit("COMMITUSER", data);
  }
};
export default UserAction;