在最近的项目开发中,前端部分使用 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","删除成功!");