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

男娘i 2023-06-24 04:28 2阅读 0赞

**一、需求问题**

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

**二、需求分析**

针对多页面的数据联动，我们可以使用`Vuex`配合本地存储区解决。关于`Vuex`和`localStorage`的结合，可以看一下我之前写的一篇文章，文章地址为 `https://blog.csdn.net/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">{ {  item.wish }}</span> 人想看</p>
                            <p>主演：{ {  item.star }}</p>
                            <p>{ {  item.rt }}上映</p>
                        </div>
                        <div class="btn_pre">
                            预售
                        </div>
                    </li>
                </ul>
            </Scroller>
    	</div>
    </template>
        
    <script>
    export default { 
        name: 'CommingSoon',
        data() { 
            return { 
                comingList: [],
                isLoading: true,
                prevCityId: -1
            }
        },
        activated() { 
    
            var cityId = this.$store.state.city.id;
            if ( this.prevCityId === cityId ) { return;}
            this.isLoading = true;
    
            this.axios.get('/api/movieComingList?cityId='+cityId).then((res) => { 
                var  msg = res.data.msg;
                if ( msg === 'ok') { 
                    this.comingList = res.data.data.comingList;
                    this.isLoading = false;
                    this.prevCityId = cityId;
                }
            })
        },
        methods: { 
            handleToDetail (movieId) { 
                this.$router.push('/movie/detail/2/' + movieId);
            }
        }
    }
    </script>
    
    <style scoped>
    #content .movie_body{  flex:1; overflow:auto;}
    .movie_body ul{  margin:0 12px; overflow: hidden;}
    .movie_body ul li{  margin-top:12px; display: flex; align-items:center; border-bottom: 1px #e6e6e6 solid; padding-bottom: 10px;}
    .movie_body .pic_show{  width:64px; height: 90px;}
    .movie_body .pic_show img{  width:100%;}
    .movie_body .info_list {  margin-left: 10px; flex:1; position: relative;}
    .movie_body .info_list h2{  font-size: 17px; line-height: 24px; width:150px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
    .movie_body .info_list p{  font-size: 13px; color:#666; line-height: 22px; width:200px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
    .movie_body .info_list .grade{  font-weight: 700; color: #faaf00; font-size: 15px;}
    .movie_body .info_list img{  width:50px; position: absolute; right:10px; top: 5px;}
    .movie_body .btn_mall , .movie_body .btn_pre{  width:47px; height:27px; line-height: 28px; text-align: center; background-color: #f03d37; color: #fff; border-radius: 4px; font-size: 12px; cursor: pointer;}
    .movie_body .btn_pre{  background-color: #3c9fe6;}
    </style>