保姆级指南：Vue 3 + Pinia + Vue Router + 高德地图实现不同页面数据传递与效果展示

技术背景

Vue3是目前最新版本的Vue.js框架，它引入了很多新的特性和改进，包括更好的性能、更灵活的组合式API、Typescript的原生支持等。Pinia是一款基于Vue3的状态管理库，它提供了类似于Vuex的功能，同时还充分利用了Vue3的响应式系统和Composition API，使得状态管理更加简单和高效。

VueRouter是Vue.js官方的路由管理器，它能够帮助我们实现SPA(单页应用)的页面切换和导航功能。而高德地图API是一组提供地图展示、位置定位、路径规划等功能的前端API，它可以与Vue框架无缝集成，用于展示地图和处理地理位置相关的业务逻辑。

项目构建

首先，在存放项目文件的文件内，通过cmd打开管理员窗口。使用vue系列创建项目的方式也就是脚手架，或者通过vue3配套的vite创建项目的方式。（本文以vue3+yarn项目方式为例）

等待下载完即可，再者为项目取名。

还是和老样子，项目取名之后就是技术栈的选项了。

这里我用的JavaScript，相对于的typescript来说它更严谨，一般在大公司或者大型的项目中会用到。

到这一步项目已算是创建好了，cd到项目里面，再通过yarn下载依赖

yarn下完之后，因为要向后端请求数据再下载axios用来封装服务器的接口

此外也可以再下载css的预处理器，sass来写页面的样式或者可以直接使用原生的CSS。

再者就下载路由(vueRouter)

pinia的安装。之后再yarn dev启动项目即可。

然后在项目文件里面的src内创建两个文件夹store和Router，一个完整的项目就创建好了。

配置路由和pinia

Router配置

可在src内，创建views的文件夹，用来管理页面。并创建三个页面。

随后在Router里面配置路由，首先，我们使用import语句导入了createRouter和createWebHashHistory函数以及相关的组件。接下来，我们使用createRouter函数创建了一个路由对象。

history: createWebHashHistory()指定了路由模式为哈希模式，使用URL的哈希值来进行路由导航。

routes：是一个路由配置数组，定义了不同路径和对应的组件。

path：指定了路径，可以是字符串也可以是正则表达式。

name：是路由的名称，可以在路由导航中使用。

component：是对应的组件，可以通过import导图页面从而达到路由的赖加载。

最后，使用export default语句输出了这个路由对象。

// 配置路由
import { createRouter, createWebHashHistory } from 'vue-router'
import App from '../App.vue'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'App',
            component: App,
        },
        {
            path: '/pagesone',
            name: 'pagesone',
            component: () => import('../views/PagesOne.vue')
        },
        {
            path: '/pagetwo',
            name: 'pagetwo',
            component: () => import('../views/PagesTwo.vue')
        },
        {
            path: '/pagesthree',
            name: 'pagesthree',
            component: () => import('../views/PagesThree.vue')
        }
    ]
})
export default router;

全局配置Router+pinia

在main.js里面导入配置好的Router路由，用createApp函数创建一个Vue应用实例，并将根组件App作为参数传入。然后，我们调用app.use(router)方法，将路由对象作为插件使用。这样，Vue应用就可以使用VueRouter提供的路由功能了。

pinia也是一样，从pinia库中导入createPinia函数，pinia是一个状态管理库，类似于Vuex，但更简单和灵活。使用createPinia函数创建一个新的pinia实例。将pinia实例添加到Vue应用中，这样Vue应用就可以使用pinia的功能了。

import { createApp } from 'vue'
import './style.css'
// 引入路由
import router from './router/index'
  // 配置pinia
import { createPinia } from 'pinia'
import App from './App.vue'
let pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

使用路由

在App.vue使用VueRouter来创建一个tabs包含三个可切换标签页的界面，每个标签页都有自己的路由和显示内容。就相当于是一个选项卡功能。

<template>
  <div class="home-container">
<!--     其他页面路由入口 -->
      <div class="content">
          <RouterView></RouterView>
      </div>
      <!-- tabs标签切换 -->
      <div class="tabs-pages">
          <div class="tabs" v-for="item in tabs" :key="item">
              <RouterLink class="tabs-router" :to="item.link">{{ item.title }}</RouterLink>
          </div>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { RouterView,RouterLink } from 'vue-router';

let tabs = ref([
  {
      title: 'A',
      link: '/pagesone'
  },
  {
      title: 'B',
      link: '/pagetwo'
  },
  {
      title: 'C',
      link: '/pagesthree'
  }
])

</script>

封装接口

在src文件下面，创建两个文件utils和apis，一个用来封装服务器接口，一个用来封装获取数据的接口。

首先是utils

// 封装axios
import axios from 'axios'; //引入axios

export const Url = '后端提供的服务器接口'

const http = axios.create({
    // 服务器地址
    baseURL: Url,
    // 设置超时
    timeout:10000
})
// 请求拦截器
http.interceptors.request.use((reqconfig) => {
    // 在当前请求配置对象上,挂Authorization授权数据
    reqconfig.headers.Authorization = localStorage.token
    // 返回修改的数据
    return reqconfig
})
// 暴露
export default http;

apis获取数据接口封装

<!-- 将服务器接口引入 -->
import http from '../utils/http'
<!-- http.请求方式 -->
export const $_cities = () => http.get('获取数据接口')

获取数据

页面A

在第一个页面，请求数据

<script setup>
// 引入获取城市列表的接口
import { $_cities } from '../apis/cities'
import { ref } from 'vue'
  
// 声明变量接收数据
let cityData = ref({})
// 发送请求获取数据
$_cities().then(res => {
    console.log(res);
})
</script>

获取数据打印出来的效果

虽然这样直接拿到了数据，但是一个数组里面包含了611个数据，所以我们需要定义一个响应式引用cityData，在获取到城市列表数据后，首先提取出所有城市的首字母并转换为大写，然后去重并排序。接着，根据首字母创建一个对象，对象的每个属性都是一个数组，用于存储对应首字母的所有城市。最后，将处理后的数据赋值给cityData。使用v-for指令来遍历cityData对象，显示城市列表，并渲染到页面上。

然后给每一个city_name添加一个点击事件，当点击时，会调用clickSon方法并传入当前城市的名字并且页面B里面实时刷新，clickSon方法也可用于改变当前选中的城市并跳转到另一个页面。

完整代码如下：

<template>
    <div>
        <div v-for="(value, groups) in cityData" :key="groups" class="cityList">
            <h2>{{ groups }}</h2>
            <div class="cityName">
                <div :class="{ selected: son == myCityData.citiesData }" @click="clickSon(son)" v-for="son in value"
                    :key="son" class="cityContent">
                    {{ son }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入获取城市列表的接口
import { $_cities } from '../apis/cities'
import router from '../router';
// 引入pinia
import { useStore } from '../store/cities'
import { ref } from 'vue'

let myCityData = useStore()

let cityData = ref({})

$_cities().then(res => {
    // 获取索取城市的首字母,然后转换为大写
    let initial = res.data.map(city => city.city_pre.toUpperCase())
    // 获取到之后去重
    initial = [...new Set(initial)]
    // 然后使用sort方法对这个数组进行排序
    initial.sort()
    console.log(res);

    // 声明一个对象，用来存储获取到的城市数据
    let cityObj = {}
    for (let groups of initial) {
        cityObj[groups] = []
    }

    // 遍历数组,将获取到的数据push到对应的city中
    for (let city of res.data) {
        let cityPre = city.city_pre.toUpperCase()
        cityObj[cityPre].push(city.city_name)
    }

    // 最后进行赋值
    cityData.value = cityObj
    console.log(cityData.value);
})

// 点击改变城市的名字
let clickSon = city => {
    myCityData.changeCityName(city)
   // 点击城市，跳转到城市对应的map页面
    router.push('/pagetwo')
}
</script>

pinia代码

首先，我们导入了defineStore函数和ref函数。defineStore函数用于定义一个store，而ref函数用于创建一个响应式的数据

然后，我们调用defineStore函数来定义useStore。在定义useStore的回调函数中，我们首先创建了两个响应式的数据：citiesData和cityCode，它们的初始值都为空字符串。

接下来，我们定义了两个函数：changeCityName和changeCityCode。changeCityName函数用于改变选中城市的名字，它接受一个参数cityName，并将其赋值给citiesData。changeCityCode函数用于改变城市的代码，它接受一个参数code，并将其赋值给cityCode。

最后，我们将citiesData、cityCode、changeCityName和changeCityCode作为useStore的返回值，使它们可以在其他组件中使用。

// 配置pinia
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useStore = defineStore('city', () => {
  //城市名字的初始值
  let citiesData = ref('');
  //城市的地理编码
  let cityCode = ref('')
  // 改变选中城市的名字
  let changeCityName =  (cityName) => {
    citiesData.value = cityName
  }
  //改变城市的地理编码               
  let changeCityCode = (code) => {
    cityCode.value = code
  }
  // 返回出去
  return {
    citiesData,
    cityCode,
    changeCityName,
    changeCityCode
  }
})

效果图

此时已实现点击城市，实现页面的跳转和切换城市的功能，接下来在点击城市的同时在B页面刷新该城市的map功能。

请求city_name对应的地图

在获取每一个城市所对应的地图之前，需要拿到获取地图的接口(以高德地图为例)，直接在高德API里面的开发支持中，选择web服务及web服务API，切换到地理编码点击运行拿到获取地图功能的接口。而获取到对应城市的地图需要三个参数：key、address和city。同样的方法切换天气查询即可拿到获取对应城市的天气接口，而获取对应城市的天气的参数就是该城市的地理编码也就是city_code。

获取key，鼠标滑到个体头像点击应用管理。然后创建新应用，添加key时，这一步只需要选择web服务即可，如此便拿到获取map功能的key值了。

封装获取map接口

在utils内的map.js使用axios.create方法创建AL_map的axios实例。在创建实例时，传入一个配置对象，其中包括了baseURL和timeout两个属性。baseURL指定了请求的基础URL为map_ip，timeout指定了请求的超时时间为10秒。

最后，我们通过export default将AL_map实例导出，使其可以在其他模块中使用

// 封装高德地图接口
import axios from 'axios'
const map_ip = 'https://restapi.amap.com'

// 基础封装
const AL_map = axios.create({
    baseURL:map_ip,
    timeout:10000
})
export default AL_map;

然后在apis内的almap.js封装对应的城市map接口和对应城市的天气接口。高德的map接口get和post的请求方式都支持。

// 引入封装好的接口
import AL_map from '../utils/map'

export const web_key = '在创建应用管理拿到的key'
// 获取对应城市地图
export const $_getCityMap = params => AL_map.get('/v3/geocode/geo',{params})
// 获取对应城市的天气
export const $_getCityWeather = params => AL_map.get('/v3/weather/weatherInfo',{params})

页面B获取页面A对应城市的map

获取数据

首先，我们使用import语句导入了useStore函数来获取Pinia的store实例，以及$_getCityMap接口和web_key来获取高德地图API的相关函数和密钥。我们还导入了onMounted和ref函数来处理组件的生命周期和创建响应式数据。

接下来，我们调用useStore函数获取名为cityStore的store实例，并使用storeToRefs函数将store实例中的citiesData转换为响应式数据。然后，我们创建了一个名为cityNameMap的响应式数据，用于存储城市地图数据。

在onMounted生命周期钩子中，我们调用$_getCityMap接口来获取城市地图数据。我们传入了web_key和citiesData.value作为参数，其中citiesData.value表示选中的城市数据。

在获取到地图数据后，我们将其赋值给cityNameMap.value。

接下来，我们将地图数据保存在Pinia的store中，通过调用cityStore.changeCityCode函数来改变城市代码。

最后，我们使用获取到的经纬度创建了一个地图实例，并设置了地图的视图模式、缩放级别和中心点。

完整代码如下：

<template>
    <div>
        
        <div id="container" class="container"></div>
    </div>
</template>

<script setup>
import { useStore } from '../store/cities'
// 封装好获取城市map的接口
import { $_getCityMap, web_key } from '../apis/almap'
import { onMounted, ref } from 'vue';
// 转换响应数据
import { storeToRefs } from 'pinia';

const cityStore = useStore()
const { citiesData } = storeToRefs(cityStore)
const cityNameMap = ref({})
// 获取map的节点所以要用到onMounted
onMounted(() =>{ 
$_getCityMap({
    key: web_key,//获取到的key
    address: citiesData.value, //城市的名字city_name
    city: citiesData.value
}).then(res => {
    cityNameMap.value = res.data.geocodes[0]
    console.log(res);

    // 将数据保存在pinia中
    cityStore.changeCityCode(cityNameMap.value.adcode);

    // 获取经纬度,创建地图
    const map = new AMap.Map('container', {
        viewMode: '2D',  // 默认使用 2D 模式
        zoom: 11,  //初始化地图层级
        center: cityNameMap.value.location.split(',')  //初始化地图中心点
    });
})
})
</script>
// 地图一定要给宽高，否则出不来
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 600px;
}
</style>

实现效果图

当我们随机点击A页面中的某一个城市，并且跳转到页面时。即可实现不同页面跳转实时刷新数据的功能啦。

页面C实现A页面对应城市的天气

获取数据

还是一样的操作import语句导入了useStore函数来获取Pinia的store实例，以及$_getCityWeather接口和web_key来获取高德地图API的相关函数和密钥。我们还导入了ref函数来创建响应式数据。打印出请求到的数据。

然后，我们使用useStore函数获取名为cityWeather的store实例，并创建了两个响应式数据weatherData和weatherIcon，分别用于存储天气数据和天气图标。

在$_getCityWeather函数中，我们传入了web_key和cityWeather.cityCode作为参数，其中cityWeather.cityCode表示选中的城市代码。

完整代码如下：

<template>
    <div class="three-container">
        <div class="content">
            <img class="weather-img" :src="weatherIcon">
            <H3>{{ weatherData.province }}-{{ weatherData.city }}-天气：{{ weatherData.weather }}</H3>
        </div>
    </div>
</template>

<script setup>
import { useStore } from '../store/cities'
import { $_getCityWeather, web_key } from '../apis/almap'
import { ref } from 'vue'
// 使用pinia
let cityWeather = useStore()
// 天气响应数据
let weatherData = ref({})
// 天气对应的图片
let weatherIcon = ref({})

$_getCityWeather({
    key: web_key, //之前拿到的key
    city: cityWeather.cityCode //城市的地理编码
}).then(res => {
    weatherData.value = res.data.lives[0]
    // 根据天气情况设置相应的图标URL
    switch(weatherData.value.weather){
        case '晴':
            weatherIcon.value = '../../public/imgs/sunday.jpg';
            break;
        case '阴' && '多云':
            weatherIcon.value = '../../public/imgs/red.jpg';
            break;
        case '雨':
            weatherIcon.value = '../../public/imgs/rain.jpg';
            break;
        default:
            weatherIcon.value = '../../public/imgs/defaut.jpg';
            break;
    }
    console.log(res);
})

</script>

因为后端给出的数据中没有图片，所以用了本地的图片来代替，通过Switch方法来渲染每一个城市所对应的天气和图片。之前这里用过if + includes的方法，只不过这个方法只能渲染出一张图片，再渲染时includes就报错了，有知道解决方法的小伙伴们可以评论哦！

实现效果图

点击A页面某一个城市，然后跳转到C页面就获取到该城市所对应的天气啦。

总结

该功能是基于vue3实现不同页面之间的数据的传递以及数据的渲染。功能比较简单实现也比较容易。有不足之处希望小伙伴们，批评指正。