router.js

import Vue from 'vue'

import Router from 'vue-router'

import Index from './views/Index.vue'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'index',

component: Index

},

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

},

{

path: '/info/:id',

name: 'info',

component: () => import('./views/ShopInfo.vue')

}

,

{

path: '/guid',

name: 'guid',

component: () => import('./views/Guid.vue')

}

]

})

store.js

import Vue from 'vue'

import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

user: {}, shops: [], baseUrl: 'http://plateform.com:81', shopInfo: {}

},

getters: {

user(state) {

return state.user;

},

shops(state) {

return state.shops;

},

baseUrl(state) {

return state.baseUrl;

},

shopInfo(state) {

return state.shopInfo;

}

},

mutations: {

setUser(state, user) {

state.user = user

},

setShops(state, shops) {

shops.forEach((v) => {

state.shops.push(v)

})

},

setShopInfo(state, shopInfo) {

state.shopInfo = shopInfo;

}

},

actions: {

//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

getShopInfo({state, commit}, param) {

return new Promise((resolve,reject)=>{

console.log('getShopInfo')

axios.get(state.baseUrl + '/api/shop/' + param.id)

.then((data) => {

console.log(data)

commit('setShopInfo', data.data)

resolve();

})

.catch((err) => {

console.log(err)

reject();

})

})

}

}

})

main.js

import Vue from 'vue'

import App from './App.vue'

import store from './store'//引入sotre

import router from './router'//引入router

import axios from 'axios'

Vue.config.productionTip = false

router.beforeEach((to, from, next) => {

console.log('进入守卫')

console.log(to)

})

new Vue({

store,

router,

render: h => h(App)

}).$mount('#app')