本文的主要是针对“在某一个点击消息列表时,跳转至新界面,菜单栏未读消息数据时刻发生变化,进行的例子”
因为我们知道,我们没办法监听缓存中的数据,所以这里需要用vuex进行数据处理。
1、 我们创建一个js文件 getAccount.js
export default {
namespaced: true,
state: {
account :0// 标记消息的初始值为0
},
mutations: {
/**
* @description 设置更新剩余消息数据
* @param {Object} state state
* @param {Object} log data
*/
setAccount (state, flag) {
state.account = flag
}
}
}
2、 去消息列表界面(可点击的界面进行更新vuex中account数据)
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState('d2admin/ getAccount', [
'account' // 映射 this.account 为 this.$store.state.account
])
},
methods: {
...mapMutations('d2admin/getAccount', ['setAccount']),
// 获取消息的方法
getMyMessageCount(){
// indexMyMessageCount()为调用的接口
indexMyMessageCount().then(res => {
let messagecount = res // 获取消息数据
// 更新vuex中的account数据
this.setAccount(messagecount)
}).catch(() => {
this._message('查询消息失败', 'error')
this.loading = false
})
},
}
}
3、在菜单代码界面,进行渲染
// 渲染 vuex中存储的account数据
<ai-tooltip class="item" effect="dark" :content="account" placement="bottom-end">
<img style="margin-right:20px;cursor:pointer" :src="require('./message.png')" @click="gotoMessage"/>
</ai-tooltip>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState('d2admin/ getAccount', [
'account' // 映射 this.account 为 this.$store.state.account
])
},
methods: {
...mapMutations('d2admin/getAccount', ['setAccount']),
}
}
如果你本身在这个模块 mounted方法中执行了一次剩余消息的接口,这时候你可以重复一下第二步操作。
import { mapMutations } from 'vuex'
export default {
computed: {
...mapState('d2admin/ getAccount', [
'account' // 映射 this.account 为 this.$store.state.account
])
},
mounted(){
// 获取消息的方法
getMyMessageCount(){
// indexMyMessageCount()为调用的接口
indexMyMessageCount().then(res => {
let messagecount = res // 获取消息数据
// 更新vuex中的account数据
this.setAccount(messagecount)
}).catch(() => {
this._message('查询消息失败', 'error')
this.loading = false
})
},
},
methods: {
...mapMutations('d2admin/getAccount', ['setAccount']),
}
}