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

一、目录结构

src|components|
				city|
					City.vue
					List.vue(City.vue的子组件)
				home|
					Home.vue
					Banner.vue(Home.vue的子组件)
	store     |
				index.js	//vuex

二、实现目标

从City.vue中的List.vue传递值到Home.vue的Banner.vue中显示（选择城市后返回Home.vue在图下方"北京"这里显示）

正常情况下传值是这样的：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 ">&#xe6aa;</i>
     </div>
    </div>
</template>
    

<script>
    import {mapState} from 'vuex';
    export default {
		computed:{
            ...mapState(['cityName'])
        },
	},
</script>

五、在List.vue中

@click添加一个方法并且把item.name传过去
<div v-for='(item,index) in hotCities' :key="index"
                 @click="toHome(item.name)"
            >
                {{item.name}}<!--北京、上海等等城市名-->
</div>

<script>
import {mapMutations} from 'vuex';
export default {
 methods: {
 			...mapMutations(['changeCity']),//引入函数
            toHome(cityName) {
                this.$router.push({//返回首页
                    path: "/",
                });
                this.changeCity(cityName);
            },
            
        },
        }
</script>  

六、在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;
    },
  },
})