Element-UI訊息提示元件Message在Vuex中的呼叫實現
阿新 • • 發佈:2019-01-25
在最近的專案開發中,前端部分使用 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","刪除成功!");