默认首页的城市为上海,比如想搜索桂林当用户切换后,刷新页面还是会重新变为上海,这里就需要一个缓存了,做到本地存储,把用户切换后的数据存下来。
使用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的值
具体如何使用呢?
- 在header.vue组件中引入,在js块中引入
import {
mapState } from 'vuex'
- 在header.vue组件中定义一个对象
computed:{
...mapState([ //展开运算符 mapState本是一个函数,在里面写一个数组,记得加...
'city', //存的数据
])
}
- 然后就可以不用this.$store.state.city引用了,直接插值
{ {this.city}}
优化完后:
使用keep-alive优化网页性能
每一次路由切换时,ajax都会被发送,因此需要使用keep-alive优化网页性能。
有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。
但是当切换不同的城市的时候,是不需要缓存的。需要在home.vue使用钩子函数activated
。
当组件再次重新渲染的,钩子函数activated就判断最后的城市和缓存中的城市是不是相同,再次发起Ajax请求。
keep-alive的生命周期
- 初次进入时:created > mounted > activated;退出后触发 deactivated
- 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中