在 vuex 中使用element-ui的Message消息提示

最新推荐文章于 2025-04-23 16:00:18 发布

姜来前端程序媛

最新推荐文章于 2025-04-23 16:00:18 发布

阅读量590

点赞数

分类专栏： Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_74285634/article/details/131596890

版权

Vue 专栏收录该内容

11 篇文章

订阅专栏

在src/utils/tips.js文件中导入了ElementUI的Message组件，定义了一个函数用于显示不同类型的消息提示。在src/store/worksearch.js中，actions的getWoTitle方法中使用这个函数，尝试获取数据时显示数据获取成功的success消息，若出现错误则显示数据获取失败，请重试的error消息。

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

实现操作：

1、src/utils/tips.js

import { Message } from 'element-ui'

export default (message, type = 'error') => {
  Message({
    message,
    type
  })
}

2、src/store/worksearch.js

import Message from '@/utils/tips'

const actions = {
  async getWoTitle() {
    try {
      Message('数据获取成功！', 'success')
    } catch (error) {
      Message('数据获取失败，请重试！')
    }
  }
}