首先建立store:
import router, { rootRoute, exceptionRoutes, filterAsyncRoutes } from '@/routes'
import asyncRoutes from '@/routes/asyncRoutes'
import config from '@/utils/config'
import { length } from '@/utils'
import request from '@/api'
export default {
namespaced: true,
state: {
messageList:[],//消息列表
},
mutations: {
//聊天消息储存
SET_MESSAGELIST:(state, info)=>{
let data = Object.assign([], state.messageList ,info)
state.messageList = data
},
},
actions: {
},
// 同步缓存页面
AsyncIncludes ({ commit, state }, data) {
commit('SET_INCLUDES', data)
},
// 新增缓存页面
AddIncludes ({ commit, state }, path) {
let includes = state.includes
if (includes.indexOf(path) < 0) {
includes.push(path)
}
commit('SET_INCLUDES', includes)
},
// 删除缓存页面
DelIncludes ({ commit, state }, path) {
let includes = state.includes.filter(i => i !== path)
commit('SET_INCLUDES', includes)
},
// 退出
Logout ({ commit }) {
commit('SET_OUT')
}
},
getters: {
includes: state => state.includes,
get_CustomerList: state => state.customerList,
get_ExpertList: state => state.expertList,
}
}
重点是:
SET_MESSAGELIST:(state, info)=>{
let data = Object.assign([], state.messageList ,info)
state.messageList = data
}
然后是存值:
hat.$store.commit('permission/SET_MESSAGELIST', that.conversationList)
一定带上模块名称(permission)。
然后是使用computed计算属性取值:
computed: {
cuserList() {
return this.$store.state.permission.messageList;
},
},
使用深度监听新值变化:
watch:{ //监听value的变化,进行相应的操做便可
fuid: function(a,b){ //a是value的新值,b是旧值
this.uid = this.fuid;
this.chatList =[]
this.getChatList();
},
cuserList: {
handler(nval, oval) {
debugger
if(nval.length>0){
this.userList.forEach(item=>{
nval.forEach(item2=>{
if(item.uid==item2.send_uid && this.uid ==item2.receive_uid){
item.unreadCount = item.unreadCount+1;
item.msg_type = item2.msg_type;
item.msg_content = item2.msg_content;
}
if(item.uid==item2.send_uid && this.uid ==item2.receive_uid){
item.unreadCount = item.unreadCount+1;
item.msg_type = item2.msg_type;
item.msg_content = item2.msg_content;
}
})
})
console.log(this.userList)
}
},
deep: true, // 深度监听
immediate: true,//立即执行
},
},
完毕,这样能解决绝大部分问题。