2-8 vuex实现city跨组件传参

一、事件传参

<li v-for="city of hotCities" :key="city.name" @click="handleClick(city.name)">{{city.name}}</li>

二、传参参数给vuex

methods: {
    handleClick(city){
      this.$store.commit("changeCity",city);
      //同时实现路由跳转
      this.$router.push('/movie/inTheaters')
    }
  }

三、vuex中改变数据

export default new Vuex.Store({
  state: {
      title:"首页",
      city:"武汉"
  },
  mutations: {
    changeTitle(state,title){
      state.title = title
    },
    changeCity(state,city){
      state.city = city;
    }
  },
  actions: {
  }
})

四、使用缓存实现数据持久化

技术要点

localStorage.setItem("city",city);
localStorage.getItem("city")
//技术要点,使用localStorage的时候使用try-catch对代码进行包裹
try{
  localStorage.setItem("city",city)
}catch(e){
  console.log(e)
}

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
function getCity(){
  let defaultCity = "武汉";
  try{
    if(localStorage.getItem("city")){
      defaultCity = localStorage.getItem("city")
    }
  }catch(err){
    console.log(err)
  }
  return defaultCity
}
export default new Vuex.Store({
  state: {
      title:"首页",
      city:getCity()
  },
  mutations: {
    changeTitle(state,title){
      state.title = title
    },
    changeCity(state,city){
      state.city = city;
      localStorage.setItem("city",city)
    }
  }
})