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

本文介绍如何在点击消息列表时,利用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']),
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值