使用localStorage
当选中某一个城市之后,如果没有使用缓存那么在刷新页面或者重新打开页面的时候,城市会变成初始化的城市,这个可以通过localStorage来解决
在用户通过mutation来改变数据的时候,可以使用localStorage来存储数据,而state的值优先从localStorage中获取
//index.js
state: {
city: localStorage.city || '北京'
},
mutations: {
changeCity1 (state, city) { //这里的changeCity1就是actions中传过来的第一个参数
state.city = city
localStorage.city = city
}
}
使用localStorage最好在外层使用try…catch,因为有的用户会关闭浏览器的存储功能,如果没有用try…catch,则js就会报错停止运行
//index.js
let defaultCity = '上海'
try {
if(localStorage.city) {
defaultCity = localStorage.city
}
} catch(e){}
export default new Vuex.store({
state: {
city: defaultCity
},
mutations: {
changeCity1(state, city){
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
}
})
使用mapState等辅助函数
//header.vue
import { mapState } from 'vuex'
然后在计算属性computed中接受mapState,用计算属性是因为数据一旦发生改变则视图层可以及时变化
使用辅助函数的同时可以使用es6的对象扩展符(相当于展开)
//header.vue
computed: {
...mapState(['city']) //这里的意思是把state中的名为city的数据映射到computed中的名为city的计算属性之中: city: city
}
使用辅助函数之后,上面获取数据的地方就不应使用this.$store.state.city,直接使用计算属性就可以:this.city
<div class="button">{{this.city}}</div>
mapState中不仅可以放数组,还可以放对象,例如:
computed: {
...mapState({
currentCity: 'city'
}) //这里的意思是把state中的名为city的数据映射到computed中的名为currentCity的计算属性之中: currentCity: city
}
那么这里获取数据就应该使用this.currentCity
mapMutations
我们在列表或者热门城市的点击函数中使用了dispatch或者commit去改变state中的数据,这里vuex也同样给我们提供了一个名为mapMutations的辅助函数
import { mapState, mapMutations } from 'vuex'
然后在methods中使用该辅助函数
//list.vue
methods: {
handleCityClick(){
this.changeCity1(city)
this.$router.push('/')
},
...mapMutations(['changeCity1']) //这里相当于在methods中定义了一个名为changeCity1的函数
getters
作用有点类似于组件中的计算属性,对state中的数据进行计算
//index.js
export default new Vuex.store({
state: state,
mutations: mutations,
getters: {
doubleCity(state){
return state.city + ' ' + state.city
}
}
})
使用的时候和mapState一样,在computed计算属性中使用
//header.vue
import { mapState, mapGetters } from 'vuex'
computed: {
...mapState(['city']),
...mapGetters(['doubleCity'])
}
<div class="button">{{this.doubleCity}}</div>