关于vuex
vuex ：

1、getters ：获取不同类型数据（类似计算属性

2、mutations :同步修改 ，使用commit（注意 fn 名字是 大写

3、actions ：异步修改 ，使用 dispatch调动
（注意 fn 是小写 ，-- 修改完 commit 调用 同步的方法

数据管理

const state ={
    messageNum:0
}
// 计算属性，对state 重新编写自己想要的-
const getters = {
    getNum(){
        return ((+state.messageNum)<=99)?(+state.messageNum):'99+';
    }
}
// 接口请求后--同步处理--对state进行重新赋值
const mutations = {
    SET_MESSAGE_NUM (state, data) {
        // 此处保证数据的纯粹性，不进行编译，防止其他地方再次使用，拿不到原始数据
        state.messageNum = data
    }
}
// 异步处理
const actions = {
    setMessage({ commit }, data) {
        commit('SET_MESSAGE_NUM', data)
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}

使用：页面使用

// 同步
this.$store.commit('SET_MESSAGE_NUM',110)
// 异步
this.$store.dispatch('setMessage', 11)

关于：element -ui 的侧边栏 数字提醒

参考 ：
https://blog.csdn.net/qq_44778129/article/details/126757694

注意 ： 还有 侧边栏 折叠起来 ，红点的显示

<script>
import store from '@/store/modules/message'

export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    const messageNum = store.getters.getNum()
    /*1、消息>0 2、信息管理 3、侧边栏关闭*/ 
    const isShowNum = (title === '消息管理')&&(messageNum>0)

    if (icon) {
      
      // isShowNum&& 需要 加上 这个消息条件
      if ((title === '消息管理')&&store.state.isSidebar) {
        vnodes.push(
          <span>
            <svg-icon icon-class={icon}/>
            <b class="ispppp"></b>
          </span>
        )
      } else { // 其他菜单过滤同理
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    if (title) {
      if (isShowNum) {
        vnodes.push(
          <span slot='title'>
            {title}
            <el-badge value={messageNum} />
          </span>
        )
      } else { // 其他菜单过滤同理
        vnodes.push(<span slot='title'>{title}</span>)
      }
    }
    return vnodes
  }
}
</script>