一、定义变量

1、在vue项目src目录下有一个store文件夹 ,创建项目会自带，若没有百度如何创建store

2、在store的module下创建一个user.js文件, 其中第一行import的是一个封装的js文件，调用getUnreadCount方法将会到后台查询未读消息个数

import {
  getUnreadCount
} from '@/api/user'

export default {
  state: {
    unreadCount: 0，
    avatorImgPath: '',
  },
  mutations: {
    setAvator (state, avatorPath) {
      state.avatorImgPath = avatorPath
    },
    setMessageCount (state, count) {
      state.unreadCount = count
    }
  },
  getters: {
  },
  actions: {
    // 此方法用来获取未读消息条数，接口只返回数值，不返回消息列表
    getUnreadMessageCount ({ state, commit }) {
      getUnreadCount().then(res => {
        const { data } = res
        commit('setMessageCount', data)
      })
    },
  }
}

3、在store下的index.js中添加user组件，app是自带的js文件

import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'
import app from './module/app'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
    user,
    app
  }
})

二、使用

user.js

<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick">
      <Badge :dot="messageUnreadCount">
        <Avatar :src="userAvator"/>
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem>
        <DropdownItem name="editPassword">修改密码</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
  import './user.less'
  import { mapActions } from 'vuex'
  export default {
    name: 'User',
    props: {
      userAvator: {
        type: String,
        default: ''
      },
      messageUnreadCount: {
        type: Number,
        default: 0
      }
    },
    methods: {
      handleClick (name) {
      }
    }
  }
</script>

user.vue父组件main.vue

<template>
  <Layout style="height: 100%" class="main">
    <user :message-unread-count="unreadCount" :user-avator="userAvator"/>
  </Layout>
</template>
<script>
import User from './components/user'
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Main',
  components: {
    User
  },
  data () {
    return {
    }
  },
  computed: {
    userAvator () {
      if(sessionStorage.getItem('user')){
        let user = JSON.parse(sessionStorage.getItem('user'))
        return  this.$store.state.user.avatorImgPath ? this.$store.state.user.avatorImgPath:user.avatorImgPath
      }
      return  this.$store.state.user.avatorImgPath
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  methods: {
     ...mapActions([
      'getUnreadMessageCount'
    ]),
  },
  watch: {
  },
  mounted () {
    // 获取未读消息条数
    this.getUnreadMessageCount()
  }
}

三、另一个无关系的页面MessageInfo.vue修改值，修改后，在页面中发现main.vue中的值将会改变

<template>
  <div style="display: inline-block;width: 100%">
   
  </div>
</template>

<script>
export default {
  name: 'MessageInfo',
  props: {
  },
  components: {
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    // 修改store中的messageCount的值
    countMessageAmount (type) {
        this.$store.commit('setMessageCount', 1)
    }
  }
}
</script>

<style lang="less" scoped>
</style>