网站内容自动更新( 新人菜鸟一枚，记录一下平时写项目时遇到的问题)

　　网站内容自动更新(

新人菜鸟一枚，记录一下平时写项目时遇到的问题)

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

　　要求是用户登录时需要查询未维护的License列表，然后滚动显示在网站首页。单击以转到个人中心以维护许可证。完成License维护后，再次检查。如果没有需要维护的许可证，请滚动到顶部。消息消失。

　　登录.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));

}

}

}

})

　　登录后的效果

　　红框内的内容每秒滚动一次

　　header.vue html

{{v+"未维护，请及时维护！"}}

　　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放在数据里面，但是当个人中心维护完需要维护的证书后，视图就不能更新了。在发生更改之前必须对其进行刷新。在网上找到它。很久没有解决了。后来仔细看了vuex的官网文档，才意识到应该把state的值flush到computed中，这样当数据发生变化时，值会重新赋值，关联的DOM会被更新。

　　一个新人，一个菜鸟，记录下写项目时遇到的问题，方便以后查阅记忆。