import Vue from 'vue'; import App from './App.vue'; //================http 请求===========================// import request from './lib/request/request'; Vue.prototype.$request = request; //=======================饿了么UI===================// import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI) //==============路由配置======================// import Router from 'vue-router' import header from './components/header/header.vue' import menu from './components/menu/menu.vue' import child from './components/headerchild/headerchild.vue'; Vue.use(Router); const routerArr=[ { path:'/', component:header }, { path:'/header', component:header, children:[ { path:'child', component:child }, ] }, ]; let router=new Router({ mode:'history', routes:routerArr }); //================vuex=======================// import Vuex from 'vuex' Vue.use(Vuex); let store=new Vuex.Store({ state:{ totalPrice:0 }, mutations:{ increase(state,price){ state.totalPrice+=price; }, decrease(state,price){ state.totalPrice-=price; } }, actions:{ //和后端交互,异步 increa(context,id){ /* api(xxx,function () { context.commit('increase',id); })*/ } } }) //this.$store.state.totalPrice 获得数据 //this.$store.commit('decrease',5); 执行mutation方法,不能直接和后端交互 //this.$store.dispatch('decrease',5); 执行actions方法,和后端异步交互,再执行mutation //================实例化对象=======================// /* eslint-disable no-new */ new Vue({ el: '#app', router, store, render: h => h(App) });