【Vue课序4】保姆级：Vuex异步数据获取

Store的解耦:

官方提供的是将Vuex注册在src/main.js下，但是为了后来项目store的解藕，我们采取一步到位式配置，参考辉哥React教案中react+redux的设计模式。

---

1.修改主store.js，用来集中管理主分支数据，其他分支数据通过import注入

import Vue from 'vue' // 引入 vue
import Vuex from 'vuex' // 引入vuex

// 引入分支store
import table from '@/page/table/store.js'

// 使用Vuex
Vue.use(Vuex);

// 创建并导出Vuex实例
export default new Vuex.Store({
   

    strict: true,
    devtools: true,
    plugins: [],
    modules: {
   
        table
    }

});

---

2.在src下创建 page文件夹，用来存放各自路由组件，page中一个文件夹对应一个路由（也就是对应一个页面

---

3.按”2步骤“在page中创建若干子文件夹，文件夹由以下构成：

1. index.vue
2. images （ 存放静态图片资源
3. service.js （ 处理数据异步接口
4. store.js （ 管理组件自己的store

---

4.当我们创建完一个page的index.vue后一定要去/router文件夹中的index.js中注册路由。

import Vue from 'vue'
import Router from 'vue-router'

// 注册路由
import HelloWorld from '@/components/HelloWorld'
import Table from '@/page/table/index'

Vue.use(Router)

export default new Router({
   
    routes: [
    {
   
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
   
        path: '/Table',
        name: 'Table',
        component: Table
    }]
})

---

5.在config文件夹中创建的request.js

export const ip = 'http://127.0.0.1:8081';

export default function request(method, url, body, history)