十一、Vuex使用localStorage、mapState和keep-alive

默认首页的城市为上海，比如想搜索桂林当用户切换后，刷新页面还是会重新变为上海，这里就需要一个缓存了，做到本地存储，把用户切换后的数据存下来。

使用localstorage记住用户的选择（缓存）

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage在浏览器的隐私模式下面是不可读取的。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
    
    
  state: {
    
    
    city: localStorage.city || '上海'
  },
  mutations: {
    
    
    changeCity (state, city) {
    
    
      state.city = city
      // 当用户去改变城市时，不但把state里的city改了
      // 同时还要去存一个localStorage
      localStorage.city = city
    }
  }
})

只要使用localStorage建议在外层包裹一层try catch，防止用户关闭了本地存储或使用隐身模式，浏览器抛出异常

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 防止用户关闭了本地存储或使用隐身模式
let defaultCity = '上海'
try {
    
    
  if (localStorage.city) {
    
    
    defaultCity = localStorage.city
  }
} catch (error) {
    
    
  
}

export default new Vuex.Store({
    
    
  state: {
    
    
    city: defaultCity
  },
  mutations: {
    
    
    changeCity (state, city) {
    
    
      state.city = city
      // 当用户去改变城市时，不但把state里的city改了
      // 同时还要去存一个localStorage
      try {
    
    
        localStorage.city = city
      } catch (e) {
    
    
        
      }
      
    }
  }
})

把原来index.js分为三个部分

mapState的使用（常用）

mapState作用：可以辅助获取到多个state的值

具体如何使用呢？

1. 在header.vue组件中引入,在js块中引入

import {
    
     mapState } from 'vuex'

2. 在header.vue组件中定义一个对象

computed：{
    
    
...mapState([        //展开运算符  mapState本是一个函数，在里面写一个数组，记得加...
'city'， //存的数据
])
}

3. 然后就可以不用this.$store.state.city引用了,直接插值{ {this.city}}

优化完后：

使用keep-alive优化网页性能

每一次路由切换时，ajax都会被发送，因此需要使用keep-alive优化网页性能。

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

但是当切换不同的城市的时候，是不需要缓存的。需要在home.vue使用钩子函数activated。

当组件再次重新渲染的，钩子函数activated就判断最后的城市和缓存中的城市是不是相同，再次发起Ajax请求。

keep-alive的生命周期

1. 初次进入时：created > mounted > activated；退出后触发 deactivated
2. 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中