vuex导入_Vue2.0 + vue-router + Vuex 实战（导入并使用外部API）

有兴趣的可以clone项目下来学习下，先说说项目吧，导师让做一个陈年老项目WebGIS的重构，前端我们选择了没接触过的Vue，听说很不错，特地试一试，我们抛开业务不谈，在项目中我们使用了Vue2.0+VueRouter来控制页面显示和路由，通过Vuex来管理一些全局信息，比如用户Session信息等。

我们的界面由四个子组件构成，分别为左侧的navigation栏，右侧上部的header栏、右侧中部的mainpage栏，和右侧下部的footer栏。子组件之间可以共享用户的session信息、session信息通过vuex来统一进行管理。最终，通过Vue-router进行页面之间的切换，最终实现了单页面应用的功能。

代码目录结构如下：

我们参考了vuex官方教程中给出的项目结构，store用于存储全局信息、component用于用户自定义组件、views目录下放着所有的界面文件、router中配置页面路由信息、整个项目的入口在main.js、并配置App页面进行显示。App页面是包括四个子页面的父页面。

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

template: '',

store,

components: {

App

}

})

App.vue

export default {

name: 'app'

}

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Footer from '@/views/footBar'

import Header from '@/views/headBar'

import Navigation from '@/views/navBar'

import mapPage from '@/views/baidu'

import Index from '@/views/Index'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

redirect: '/index'

},

{

path: '/index',

name: 'index',

components: {

navigation: Navigation,

header: Header,

mainPage: Index,

footer: Footer

}

},

{

path: '/baidu',

name: 'mapPage',

components: {

navigation: Navigation,

header: Header,

mainPage: mapPage,

footer: Footer

}

},

{

path: '*',

name: 'others',

redirect: '/index'

}

]

})

store我们不在列出，可以自行下载代码研究，vuex的官方文档地址：http://vuex.vuejs.org/zh-cn/

除了vue的基本功能、本项目还使用了百度地图的API，希望知道vue如何引用外部API的同学也可以参照本项目配置；引入外部API步骤：

1.修改webpack的配置文件，加入externals标签；

2.在index.html中加入百度api的链接

3.在使用百度地图API的地方便可直接调用，需要注意的是，所执行的有关外部API的操作需要在vue的mounted()函数内执行，mounted代表页面已经加载完成在执行，否则可能执行API时还没有完成对其的加载、会报错。

baidu map

export default {

name: 'mapPage' ,

mounted(){

console.log(999)

//百度地图加载完成会调用这里，这里就可以正常初始化了

var map = new BMap.Map('map') // 创建Map实例

map.centerAndZoom(new BMap.Point(121.76, 31.05), 11) // 初始化地图,设置中心点坐标和地图级别

map.addControl(new BMap.MapTypeControl()) // 添加地图类型控件

// map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的

map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

}

}