最近做了一个element-admin项目,页头有一个消息框显示消息数量,点击打开消息页面
将数据存入vuex的使用,并监听数据的变化
首先在store/modules中创建一个msg.js,并在其中书写自己的state/mutation/action
const msg = {
state: {
unreadCount: 1
},
mutations: {
UNREAD_COUNT: (state, data) => {
state.unreadCount = data
},
},
actions: {
ceshi({ commit, state }, data) {
commit('UNREAD_COUNT', data)
},
}
}
export default msg
第二步
然后存入
this.$store.commit('UNREAD_COUNT', response.data.messageCount )
然后取出
computed: {
listData() {
return this.$store.state.msg.unreadCount
}
},
//监听执行
watch: {
listData(val) {
this.msgValue=val;
}
},
完工。