Vue跨父组件传值（利用vuex）以及传值后本地存储记录值（借助localStorage）

╰半夏微凉° 2023-03-03 08:37 7阅读 0赞

## 一、目录结构 ##

## 二、实现目标 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70]  
从City.vue中的List.vue传递值到Home.vue的Banner.vue中显示（选择城市后返回Home.vue在图下方"北京"这里显示）  
![在这里插入图片描述][20200730160150307.png]  
正常情况下传值是这样的：List.vue->City.vue->Home.vue->Banner.vue  
但是这样太麻烦了，所以我们用到vuex

## 三、在store/index.js中 ##

state: { 
        cityName:"北京"//定义一个cityName,默认值是北京
      },

## 四、在Banner.vue中 ##

<template>
        <div>
        <div class="top-left" @click="toCity">
             { { cityName}}
        <div>
         <i class="iconfont "></i>
         </div>
        </div>
    </template>

## 五、在List.vue中 ##

@click添加一个方法并且把item.name传过去
    <div v-for='(item,index) in hotCities' :key="index"
                     @click="toHome(item.name)"
                >
                    { { item.name}}
    </div>

## 六、在store/index.js中 ##

mutations: { 
        changeCity(state,cityName){ 
          state.cityName=cityName;
        },
      },

**↓↓↓↓↓利用localStorage本地存储记录值↓↓↓↓↓**

//默认值北京
    let defaultCity="北京";
    //如果localStorage有city，则赋值给defaultCity
    defaultCity=localStorage.city;
    
    
    export default new Vuex.Store({ 
      state: { 
         //defaultCity为cityName的默认值
        cityName:defaultCity
      },
      mutations: { 
        changeCity(state,cityName){ 
           //传过来的cityName赋给state.cityName和localStorage.city
          state.cityName=cityName;
          localStorage.city=cityName;
        },
      },
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQwMjE5_size_16_color_FFFFFF_t_70]: /images/20230208/a3d1b78057e343f4a9231d42946a175e.png
[20200730160150307.png]: /images/20230208/6aec6ac16700458ba2f000dd58f112d0.png