网站顶部消息提示滚动，处理之后自动更新

网站顶部消息提示滚动，处理之后自动更新

需求是用户登录时，需要查询出未维护的证照列表，然后在网站首页滚动展示，点击可以去个人中心维护证照，证照维护完成之后，再次查询，没有需要维护的证照之后顶部滚动消息消失。

login.vue

// 调用后台接口查询出需要维护证照列表，保存到sessionStorage中，让vuex从sessionStorage中取数据
//因为vuex里的数据在刷新时会消失
getzhao(){
	this.axios.get('xxxxxxx').then(res=>{
	  sessionStorage.setItem('zhao',JSON.stringify(res.data.msg));
	  this.$store.commit('setScoll',res.data.msg)
	 }
 }

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    scollctx:JSON.parse(sessionStorage.getItem('zhao')),
  },
  mutations:{
    setScoll(state,data){
      if(data){
        state.scollctx=data;
        sessionStorage.setItem('zhao',JSON.stringify(data));
      }
    }
  }
})

登录之后的效果

红框中的内容1秒滚动一次

header.vue

html

<div v-if="scollctx.length>0" class="scollctx" @click='gozhao'>
     <img src="../../assets/laba.png" alt="">
     <ul :class="{'animateup':animateup}" >
       <li v-for="(v,i) of scollctx" :key="i">{{v+"未维护，请及时维护！"}}</li>
     </ul>
   </div>
 </div>

js

 data(){
   return {
      animateup:false,
      // scollctx:this.$store.state.scollctx?this.$store.state.scollctx:[],
      scolltimer:null
    }
  },
 computed:{
   scollctx(){
      return this.$store.state.scollctx?this.$store.state.scollctx:[]
    }
  },
  mounted(){
    if(JSON.parse(sessionStorage.getItem('zhao'))){
      this.scolltimer=setInterval(this.scollfun,1500)
    }
  },
  beforeDestroy() {
    clearInterval(this.scolltimer)
  },
  methods:{
 	// 滚动
    scollfun(){
       this.animateup=true;
       setTimeout(()=>{
         this.scollctx.push(this.scollctx[0]);
         this.scollctx.shift();
         this.animateup=false;
       },500)
     },
     gozhao(){
       this.$router.push({
         name:'userCentre',
         query:{
           indexmenu:7
         }
       })
     },
  }

因为这里header.vue是公共组件，之前我是把scollctx这个变量放data里的，但是在个人中心维护完需要维护的证照的时候，都不能更新视图，一定要刷新才会有变化，在网上找了很久也没有解决，后来又仔细看了一下vuex的官方网文档，才知道要冲computed里面去state的值，这样数据一变化，就会重新取值，关联的DOM就会更新了。

新人菜鸟一枚，记录一下平时写项目时遇到的问题，方便自己以后查看回忆。