Vuex管理dialog、toast等常見(jiàn)全局性組件狀態(tài)時(shí)唯一性的問(wèn)題解決
前言
工作中經(jīng)常會(huì)用到類似于 dialog
、toast
、popover
等一些狀態(tài)提示組件。對(duì)于這種全局性的組件,通常會(huì)用到 vuex
來(lái)管理組件的信息。這樣的好處是代碼維護(hù)起來(lái)更加友好,但是也需要考慮唯一性的問(wèn)題。
場(chǎng)景
以 dialog
為例,唯一性問(wèn)題是指當(dāng)頁(yè)面中有多處內(nèi)容調(diào)用了同一個(gè)事件,而這個(gè)事件都是修改了全局的 vuex
狀態(tài),從而導(dǎo)致頁(yè)面中多次依賴于全局狀態(tài)的組件會(huì)同時(shí)展示。例如以下場(chǎng)景:
要解決這樣的問(wèn)題,需要在 state
中設(shè)置一個(gè) id
變量,同時(shí)給組件調(diào)用的時(shí)候傳一個(gè) id
,在展示組件之前判斷兩個(gè) id
是否一致,一致才展示。
代碼
store.js
const state = { id: "", // 用于判斷唯一性 isShow: false, }; const mutations = { setShowDialog(state, data) { state.id = data.id; state.isShow = true; }, }; export default { namespaced: true, // 解決命名沖突(使用時(shí)需要備注模塊名) state, mutations, };
dialog.vue
<!-- 全局dialog組件 --> <template> <div v-if="isShowCurrentDialog"> <!-- 組件邏輯省略 --> </div> </template> <script> import { mapState, mapMutations } from "vuex"; export default { props: { currId: { type: String, default: "", }, }, computed: { ...mapState(["id"]), isShowCurrentDialog() { if (this.currId) { return this.id === this.currId ? this.isShow : false; } else { return this.isShow; } }, }, }; </script>
xxx.vue
<!-- 調(diào)用dialog的組件 --> <template> <div> <ul> <!-- 模擬同時(shí)多個(gè)dialog調(diào)用場(chǎng)景 --> <li v-for="item in listData" :key="item.name" @click="setShowDialog({ id: item.name })"> <Dialog :id="item.name" /> </li> </ul> </div> </template> <script> import { mapMutations } from "vuex"; export default { data() { return { listData: [ { name: "aaa", }, { name: "bbb", }, { name: "ccc", }, ], }; }, methods: { ...mapMutations(["setShowDialog"]), }, }; </script>
到此這篇關(guān)于Vuex管理dialog、toast等常見(jiàn)全局性組件狀態(tài)時(shí)唯一性的問(wèn)題的文章就介紹到這了,更多相關(guān)Vuex全局性組件狀態(tài)時(shí)唯一性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決
這篇文章主要介紹了webpack搭建vue環(huán)境時(shí)報(bào)錯(cuò)異常解決,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09詳細(xì)聊聊vue組件是如何實(shí)現(xiàn)組件通訊的
組件間通信簡(jiǎn)單來(lái)說(shuō)就是組件間進(jìn)行數(shù)據(jù)傳遞,就像我們?nèi)粘5拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實(shí)現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下2022-05-05Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期實(shí)現(xiàn)代碼
我們?cè)诰W(wǎng)頁(yè)開(kāi)發(fā)時(shí)通常需要用到一些日期組件來(lái)方便用戶選擇時(shí)間,其中element日期組件是一個(gè)非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來(lái)日期的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue向后臺(tái)傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實(shí)例
這篇文章主要介紹了Vue向后臺(tái)傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue 實(shí)現(xiàn)超長(zhǎng)文本截取,懸浮框提示
這篇文章主要介紹了vue 實(shí)現(xiàn)超長(zhǎng)文本截取,懸浮框提示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗解決辦法
Vue3相較于之前的版本有了不少變化,如引用全局Js文件,這篇文章主要給大家介紹了關(guān)于vite創(chuàng)建vue3項(xiàng)目頁(yè)面引用public下js文件失敗的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對(duì)象,以及變量和對(duì)象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換,需要的朋友可以參考下2022-08-08