Element-UI消息提示组件Message在Vuex中的调用实现
2018-02-13 17:06
941 查看
在最近的项目开发中,前端部分使用
由于是单页面多组件应用,使用了
为了页面交互的友好和风格的统一,消息提醒使用
然而,系统使用了
通过这个思路,便于我们更灵活的控制js脚本。这里通过
我们知道
在
新建一个
组件内的属性
在
每次调用都会触发
组件内调用
或者actions内执行类似调用
Vue开发,整个页面基于
Element-UI实现。
由于是单页面多组件应用,使用了
Vuex做状态管理。
为了页面交互的友好和风格的统一,消息提醒使用
Element-UI的
Message消息提示, 不使用
window.alert
this.$message({ showClose: true, message: '警告哦,这是一条警告消息', type: 'warning' });
然而,系统使用了
Vuex做状态管理,在
actions中的方法中,
this并没有
$message的引用,后续还需研究下相关的对象之间的关系,但是这次从另外一个角度,对这个问题进行了考虑。
通过这个思路,便于我们更灵活的控制js脚本。这里通过
Message消息提示组件来演示。
我们知道
Vuex的状态管理是通过数据进行页面管理的,也就是说所有的页面变化其实都是数据的变化引起的。
在
state中添加属性:
const state = { msg:{type:"success", content:"", count:0}, //其他属性... }
新建一个
Msg.vue的组件:
<template> <div id="msg-dependencies" v-if="msgCount == 0"> </div> </template> <script> export default { data(){ return { } }, computed:{ msgCount(){ var type = this.$store.state.msg.type; var msg = this.$store.state.msg.content; if(msg !== "") { var param = { "type":type, message:msg }; console.log("message param:",param) this.$message(param); } return this.$store.state.msg.count; } } } </script>
组件内的属性
msgCount是
computed属性,仅仅是为了跟踪
state中
msg.count的变更,并无实际意义。
在
mutations中定义消息触发方法:
export const showInfoMsg = (state, content) => { console.log("show info msg:", content); state.msg.type = "info"; state.msg.content = content; state.msg.count = state.msg.count + 1; }
每次调用都会触发
msg.count的变更,进行反馈到
Msg.vue组件中,算是vue为我们提供的一种回调函数。
组件内调用
this.$store.commit("showInfoMsg","删除成功!");
或者actions内执行类似调用
context.commit("showInfoMsg","删除成功!");
相关文章推荐
- 【C#】无损转换Image为Icon 【C#】组件发布:MessageTip,轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常:并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘
- 使用vuex实现父组件调用子组件方法
- 【element-ui】messageBox弹窗提示消息换行问题。
- 调用MessageUI框架实现收送邮件
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 7、vue2.0用Vue.extend构建消息提示组件的方法实例实现alert模态框组件(2)
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
- 关于element-ui 中使用Notice组件(Message、MessageBox、Notification)所遇到的坑
- ymPrompt消息提示组件实现弹出层使用小结
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- 【C#】组件发布:MessageTip,轻快型消息提示窗
- ymPrompt消息提示组件js实现
- Element-Ui组件(三十)Message 消息提示
- 利用vue+elementUI实现部分引入组件的方法详解
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 前端踩坑小结:当elementui的el-dialog组件中包含子组件时,用refs调用子组件时的undefined问题
- 用PHP实现弹出消息提示框
- 仿QQ、MSN消息提示窗口的实现(C#)