vue使用store定义全局共享变量，实现夸页面数据修改与共享

左手的ㄟ右手 2023-07-04 03:25 16阅读 0赞

一、定义变量

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>