- 当多个页面使用
同一个异步请求
得到的数据, 就可以使用actions - 可以理解为缓存, 减少ajax请求次数, 减少使用流量
定义 actions
- 定义一个叫
getCinemaList
的异步方法
store目录下的index.js中:
import Vue from 'vue'
import Vuex from 'vuex'
import http from '@/util/http'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cityId: 310100,
cityName: '上海',
cinemaList: []
},
// 集中式修改状态
mutations: {
setCinemaList (state, item) {
state.cinemaList = item
}
},
// 异步
actions: {
getCinemaList (store, cityId) {
return http({
url: `/gateway?cityId=${
cityId}&ticketFlag=1&k=4902196`,
headers: {
'X-Host': 'mall.film-ticket.cinema.list'
}
}).then(res => {
// console.log(res.data)
// 调用mutations内的setCinemaList方法, 把请求后得到的数据赋值给cinemaList
store.commit('setCinemaList', res.data.data.cinemas)
})
}
},
modules: {
}
})
使用- dispatch
this.$store.dispatch('getCinemaList', this.$store.state.cityId)
具体代码
<script>
// import http from '@/util/http'
import BetterScroll from 'better-scroll'
import Vue from 'vue'
export default {
mounted () {
console.log('全局状态getCinemaList的值:',this.$store.state.getCinemaList)
// 动态获取影院列表所占用的高度
this.height = document.documentElement.clientHeight - 100 + 'px'
if (this.$store.state.cinemaList.length === 0) {
// vuex 异步流程
this.$store.dispatch('getCinemaList', this.$store.state.cityId).then(res => {
this.$nextTick(() => {
new BetterScroll('.cinema', {
mouseWheel: true, // 解决better-scroll在PC端使用,鼠标无法实现滚动的解决
scrollbar: {
// 滚动条, 要加相对位置
fade: true
}
})
})
})
} else {
console.log('使用缓存')
this.$nextTick(() => {
new BetterScroll('.cinema', {
mouseWheel: true, // 解决better-scroll在PC端使用,鼠标无法实现滚动的解决
scrollbar: {
// 滚动条, 要加相对位置
fade: true
}
})
})
}
}
}
</script>