vue全局缓存数据

创建 store/modules/global.js　　如下global.js内容

 1 import {listdictdata} from '@/api/system/dict/data'
 2 const global = {
 3   state: {
 4     dictdata:[],
 5     dictgroupdata:{}
 6   },
 7 
 8   mutations: {
 9     SET_DICTDATA: (state, dictdata) => {
10       state.dictdata = dictdata
11     },
12     SET_DICTGROUPDATA: (state, dictgroupdata) => {
13       state.dictgroupdata = dictgroupdata
14     }
15   },
16 
17   actions: {
18     // 获取字典信息
19     GetDictData({ commit }) {
20       debugger
21       return new Promise((reslove,reject)=>{
22           listdictdata("all").then(res=>{
23             if(res.data&&res.data.length>0){
24               commit("SET_DICTDATA",res.data)
25              let group={},data=res.data
26              data.map(item=>item.dicttype).forEach(item=>{group[item]=data.filter(d=>d.dicttype==item)})
27              commit("SET_DICTGROUPDATA",group)
28              reslove()
29             }
30           })
31       }) 
32     },
33   }
34 }
35 
36 export default global

创建 store/getters.js　　如下getters.js内容

const getters = {
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions,
  permission_routes: state => state.permission.routes,
  userInfo:state=>state.user,
  dictData:state=>state.global.dictdata,
  dictGroup:state=>state.global.dictgroupdata
}
export default getters

创建 store/index.js　　如下index.js内容

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import app from './modules/app'
 4 import user from './modules/user'
 5 import tagsView from './modules/tagsView'
 6 import permission from './modules/permission'
 7 import settings from './modules/settings'
 8 import global from './modules/global'
 9 import getters from './getters'
10 
11 Vue.use(Vuex)
12 
13 const store = new Vuex.Store({
14   modules: {
15     app,
16     user,
17     tagsView,
18     permission,
19     settings,
20     global
21   },
22   getters
23 })
24 
25 export default store

 

App.vue 

 1 <template>
 2   <div id="app" tag="main">
 3     <router-view />
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default  {
 9   name:  'App',
10   created () {
11     if (sessionStorage.getItem('store')) {
12       this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
13     }
14     window.addEventListener('beforeunload', () => {
15       sessionStorage.setItem('store', JSON.stringify(this.$store.state))
16     })
17   }
18 }
19 </script>

this.$store.getters.dictGroup 获取缓存信息

 

posted on 2021-09-17 15:43  zz_zjy  阅读(1272)  评论(0)  编辑  收藏  举报

导航