坑梓网站建设怎么样,视频背景网站,电子商务主要就业方向,腾讯 wordpress最近有客户反映我们系统按条件查询完列表进入详情页后再返回列表页时页面没有展示他查询的那条数据#xff0c;而是进入页面一贯会展示按无条件查询的数据#xff0c;希望我们能对列表做查询缓存#xff0c;那咱们就用keep-alive来实现一下 AppMain.vue include 属性绑定一个… 最近有客户反映我们系统按条件查询完列表进入详情页后再返回列表页时页面没有展示他查询的那条数据而是进入页面一贯会展示按无条件查询的数据希望我们能对列表做查询缓存那咱们就用keep-alive来实现一下 AppMain.vue include 属性绑定一个数组数组里是打开需要缓存的路由name templatesection classapp-maintransition namefade-transform modeout-inkeep-alive :includecachedViewsrouter-view :keykey //keep-alive/transition/section
/templatescript
export default {name: AppMain,computed: {cachedViews() {return this.$store.state.tagsView.cachedViews},key() {return this.$route.path}}
}
/scriptstore文件夹下的getters.js
const getters {visitedViews: state state.tagsView.visitedViews,cachedViews: state state.tagsView.cachedViews,
}
export default gettersstore文件夹下的modules文件夹中创建tagsView.js文件
const state {visitedViews: [], //所有访问过的路由参数cachedViews: [] // 需要可缓存的所有已访问路由name
}const mutations {ADD_VISITED_VIEW: (state, view) {if (state.visitedViews.some(v v.path view.path)) returnstate.visitedViews.push(Object.assign({}, view, {title: view.meta.title || no-name}))},ADD_CACHED_VIEW: (state, view) {if (state.cachedViews.includes(view.name)) returnif (!view.meta.noCache) {state.cachedViews.push(view.name)}},DEL_VISITED_VIEW: (state, view) {for (const [i, v] of state.visitedViews.entries()) {if (v.path view.path) {state.visitedViews.splice(i, 1)break}}},DEL_CACHED_VIEW: (state, view) {const index state.cachedViews.indexOf(view.name)index -1 state.cachedViews.splice(index, 1)},DEL_OTHERS_VISITED_VIEWS: (state, view) {state.visitedViews state.visitedViews.filter(v {return v.meta.affix || v.path view.path})},DEL_OTHERS_CACHED_VIEWS: (state, view) {const index state.cachedViews.indexOf(view.name)if (index -1) {state.cachedViews state.cachedViews.slice(index, index 1)} else {state.cachedViews []}},DEL_ALL_VISITED_VIEWS: state {// keep affix tagsconst affixTags state.visitedViews.filter(tag tag.meta.affix)state.visitedViews affixTags},DEL_ALL_CACHED_VIEWS: state {state.cachedViews []},UPDATE_VISITED_VIEW: (state, view) {for (let v of state.visitedViews) {if (v.path view.path) {v Object.assign(v, view)break}}}
}const actions {addView({ dispatch }, view) {dispatch(addVisitedView, view)dispatch(addCachedView, view)},addVisitedView({ commit }, view) {commit(ADD_VISITED_VIEW, view)},addCachedView({ commit }, view) {commit(ADD_CACHED_VIEW, view)},delView({ dispatch, state }, view) {return new Promise(resolve {dispatch(delVisitedView, view)dispatch(delCachedView, view)resolve({visitedViews: [...state.visitedViews],cachedViews: [...state.cachedViews]})})},delVisitedView({ commit, state }, view) {return new Promise(resolve {commit(DEL_VISITED_VIEW, view)resolve([...state.visitedViews])})},delCachedView({ commit, state }, view) {return new Promise(resolve {commit(DEL_CACHED_VIEW, view)resolve([...state.cachedViews])})},delOthersViews({ dispatch, state }, view) {return new Promise(resolve {dispatch(delOthersVisitedViews, view)dispatch(delOthersCachedViews, view)resolve({visitedViews: [...state.visitedViews],cachedViews: [...state.cachedViews]})})},delOthersVisitedViews({ commit, state }, view) {return new Promise(resolve {commit(DEL_OTHERS_VISITED_VIEWS, view)resolve([...state.visitedViews])})},delOthersCachedViews({ commit, state }, view) {return new Promise(resolve {commit(DEL_OTHERS_CACHED_VIEWS, view)resolve([...state.cachedViews])})},delAllViews({ dispatch, state }, view) {return new Promise(resolve {dispatch(delAllVisitedViews, view)dispatch(delAllCachedViews, view)resolve({visitedViews: [...state.visitedViews],cachedViews: [...state.cachedViews]})})},delAllVisitedViews({ commit, state }) {return new Promise(resolve {commit(DEL_ALL_VISITED_VIEWS)resolve([...state.visitedViews])})},delAllCachedViews({ commit, state }) {return new Promise(resolve {commit(DEL_ALL_CACHED_VIEWS)resolve([...state.cachedViews])})},updateVisitedView({ commit }, view) {commit(UPDATE_VISITED_VIEW, view)}
}export default {namespaced: true,state,mutations,actions
}最后 可以找个组件试一下我这边已经实现了效果可以自己去印证一下 export default {// 组件里一定要加上这个name如果不需要缓存那就可以不要这个// 这个name一定要写对要和定义的路由name一样// 如果不知道是什么可以在ADD_CACHED_VIEW打印一下view.namename: Menu,
}
