vue通过Vuex实现多页面的数据联动

一、需求问题

在vue的开发中，可能会经常遇到这样的需求。在一个页面中有一些选择的信息，比如说城市列表信息，当选择不同的城市信息后，所有相关页面的数据都会发生变化，也就是多页面的数据联动。这种多页面的数据联动在外卖平台、生鲜平台、电影平台等等是非常常见的。

二、需求分析

针对多页面的数据联动，我们可以使用Vuex配合本地存储区解决。关于Vuex和localStorage的结合，可以看一下我之前写的一篇文章，文章地址为 https://blog.youkuaiyun.com/weixin_42614080/article/details/103606729。 接下来，我是在此基础上进行的改动。我们可以在data中添加一个数据prevCityId，假设值为-1，表示上一次的城市id数据。然后从状态管理器中去进行取值，拿到状态管理器中的当前城市id值cityId。将当前的城市id值cityId和上一次的城市id值 prevCityId 进行比较。如果两者值相等，说明没有发生变化，不发生数据请求。如何两者值不等，说明城市id值发生了变化，就需要重新进行数据请求，同时将当前的城市id值赋值给上一次的城市id值，cityId值也是作为参数拼接在数据请求的接口中。

三、需求实现

代码完整示例如下：

<template>
    <div class="movie_body">
        <Loading v-if="isLoading"/>
        <Scroller v-else> 
            <ul>
                <li v-for="item in comingList" :key="item.id">
                    <div class="pic_show" @touchstart="handleToDetail(item.id)"><img :src="item.img | setWH('128,180')"></div>
                    <div class="info_list">
                        <h2>{
   
   {
   
    item.nm }}<img v-if="item.version" src="@/assets//maxs.png" alt=""></h2>
                        <p><span class="person"