教你如何使用vuex进行存值取值

最新推荐文章于 2025-04-28 19:01:04 发布

原创最新推荐文章于 2025-04-28 19:01:04 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

vue+element项目同时被 2 个专栏收录

34 篇文章

订阅专栏

vuex

3 篇文章

订阅专栏

本文介绍如何在点击消息列表时，利用Vuex更新菜单栏未读消息数，确保数据实时同步。通过创建getAccount.js文件，定义状态与变异，消息列表界面调用接口更新数据，最后在菜单栏渲染vuex存储的消息数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文的主要是针对“在某一个点击消息列表时，跳转至新界面，菜单栏未读消息数据时刻发生变化，进行的例子”
因为我们知道，我们没办法监听缓存中的数据，所以这里需要用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']),
    }
}