Vuex管理dialog、toast等常見全局性組件狀態(tài)時唯一性的問題解決
前言
工作中經(jīng)常會用到類似于 dialog
、toast
、popover
等一些狀態(tài)提示組件。對于這種全局性的組件,通常會用到 vuex
來管理組件的信息。這樣的好處是代碼維護起來更加友好,但是也需要考慮唯一性的問題。
場景
以 dialog
為例,唯一性問題是指當(dāng)頁面中有多處內(nèi)容調(diào)用了同一個事件,而這個事件都是修改了全局的 vuex
狀態(tài),從而導(dǎo)致頁面中多次依賴于全局狀態(tài)的組件會同時展示。例如以下場景:
要解決這樣的問題,需要在 state
中設(shè)置一個 id
變量,同時給組件調(diào)用的時候傳一個 id
,在展示組件之前判斷兩個 id
是否一致,一致才展示。
代碼
store.js
const state = { id: "", // 用于判斷唯一性 isShow: false, }; const mutations = { setShowDialog(state, data) { state.id = data.id; state.isShow = true; }, }; export default { namespaced: true, // 解決命名沖突(使用時需要備注模塊名) 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> <!-- 模擬同時多個dialog調(diào)用場景 --> <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等常見全局性組件狀態(tài)時唯一性的問題的文章就介紹到這了,更多相關(guān)Vuex全局性組件狀態(tài)時唯一性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Element-UI日期選擇器(選擇日期范圍)禁用未來日期實現(xiàn)代碼
我們在網(wǎng)頁開發(fā)時通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于Element-UI日期選擇器(選擇日期范圍)禁用未來日期的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實例
這篇文章主要介紹了Vue向后臺傳數(shù)組數(shù)據(jù),springboot接收vue傳的數(shù)組數(shù)據(jù)實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vite創(chuàng)建vue3項目頁面引用public下js文件失敗解決辦法
Vue3相較于之前的版本有了不少變化,如引用全局Js文件,這篇文章主要給大家介紹了關(guān)于vite創(chuàng)建vue3項目頁面引用public下js文件失敗的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象,以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換,需要的朋友可以參考下2022-08-08