vuecli3实现全局公用组件，定时下线功能（下）

vuecli3实现全局公用弹窗

实现功能：用户登录的时候，根据轮班设置会产生一个用户的轮班结束时间，就是下线时间，到了时间点要弹窗提示用户轮班时间到了，如果不操作倒计时五分钟自动注销，如果点击继续值班，每十分钟再弹窗提醒
用户登录后 不管用户在操作哪一个页面 ,到达轮班时间点 ,都显示"轮班时间已到"提示框 ,提示用户进行下一步的操作, 用vuex管理全局弹窗框的显隐

效果图：

1、首先定义好一个轮班弹窗的页面样式 logout.vue
2、用vuex管理全局弹窗框的显隐,项目目录store的app.js

const state = {
 //弹窗的显隐
  logoutDis: false
}
const mutations = {
  SET_LOGOUTDIS: (state, logoutDis) => {
    state.logoutDis = logoutDis
  },
  }
  const actions = {
  setDialog({ commit }, logoutDis) {
    commit('SET_LOGOUTDIS', logoutDis)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

这里也可以用const app={} 包含这些项目 我一开始这么写了 就没有动它 要保持前后的统一
3、getters.js

import store from "@/store/index";
const getters = {
     logoutDis: state => state.app.logoutDis
}
export default getters;

4、store里index.js

import store from "@/store/index";
const store = new Vuex.Store({
  modules,
  getters
})

export default store

5、项目的main.js

到这里vuex的内容就结束了 store的相关内容可以查看官方文档
最后现在要在app.vue引入我们定义的弹窗logout.vue 只是v-if换成store定义值了

<logOut v-if="this.$store.getters.logoutDis" />

终于到了最后的最后 ，需要设置在当前时间等于轮班时间的时候设置弹窗显示 permission.js
store.dispatch(‘app/setDialog’, true)

import store from "@/store/index";
 var size = window.setInterval(function () {
        let endTime = sessionStorage.getItem('logoutTime')
        var a = endTime.split(':')
        var s = new Date()
        if (s.getHours() === parseInt(a[0]) && s.getMinutes() === parseInt(a[1]) && s.getSeconds() === parseInt(a[2])) {
          // window.clearInterval(size)
          // 调用全局弹出框
          store.dispatch('app/setDialog', true)
        }
      }, 1000)

 在子组件中或其他任意页面要控制弹窗的显隐   this.$store.dispatch('app/setDialog', true)

总结：

1、因为下线时间是可变的，由子组件传出 ，所以不要清除定时器 ，获取下线时间也放在定时器内获取
2、vuex unknown action type: setDialog 报错解决 ， store.dispatch(‘setDialog’, true)换成store.dispatch(‘app/setDialog’, true)加上文件名，页面里的也一样