路由表（基本配置-01）

import Vue from ‘vue‘;
import App from ‘./App.vue‘;
import PageA from ‘./pages/PageA‘;
import PageB from ‘./pages/PageB‘;
import PageC from ‘./pages/PageC‘;
import PageD from ‘./pages/PageD‘;
import PageE from ‘./pages/PageE‘;
import PageF from ‘./pages/PageF‘;
import ‘bootstrap/dist/css/bootstrap.min.css‘;


Vue.config.productionTip = false;

// 第2步：导入vuex
import Vuex from ‘vuex‘;
Vue.use(Vuex);

// 第3步： 构建vuex的store

const store = new Vuex.Store({
  // 所有的状态(共享数据)都在放在state
  state: {
    count: 200,
    list: [
      {id:1, name:‘棒棒糖‘},
      {id:2, name:‘尿不湿‘}
    ]
  },
  getters: {
    size(state) {
      return state.list.length;
    },
    doubleCount(state) {
      return state.count * 2;
    }
  },
  // 第1步：定义mutation
  mutations:{    
    increment(state, value) {      
      state.count += value.step;
    },
    push(state, value) {
      state.list.push(value);
    }
  },
  actions: {
    // action方法的第1个参数为上下文数, 通过context下state或commit操作state状态
    incrementAsync({ commit } , value) {      
      setTimeout(() => {
        commit(‘increment‘, value);
      } , 1000);
      
    },
    patch({ commit } ,value) {
      console.log(value);
      commit(‘increment‘ , {step: value.step});
      commit(‘push‘ , value.commodity);
    }
  }
});



import VueRouter from ‘vue-router‘;
Vue.use(VueRouter);

const routes = [
  { path: ‘/‘, redirect: ‘/a‘},
  { path: ‘/a‘, name: ‘a‘, component: PageA},
  { path: ‘/b‘, name: ‘b‘, component: PageB},
  { path: ‘/c‘, name: ‘c‘, component: PageC},
  { path: ‘/d‘, name: ‘d‘, component: PageD},
  { path: ‘/e‘, name: ‘e‘, component: PageE},
  { path: ‘/f‘, name: ‘f‘, component: PageF},
];




const router = new VueRouter({
  routes
});

// 全局响应式共享对象
Vue.prototype.store = Vue.observable({
  count: 50
});

// 第1步：原型上添加vue类型的对象,总线
Vue.prototype.bus = new Vue();



// 根组件
new Vue({
  data: {
    globalCount: 100
  },
  // 第4步：注入到根组件中
  store,
  router,
  render: h => h(App),
}).$mount(‘#app‘)