状态模式

状态模式

目的

对象有多种不同的行为和属性，为了简化判断。把不同行为和属性作为对象状态

场景

状态模式根据状态把对象切换完全不同的行为，属性，样式等等。

示例代码

<template>
    <div>
        <a v-if="status === 'a'"></a>
        <b v-if="status === 'b'"></b>
        <c v-if="status === 'c'"></c>
    </div>
</template>
<script setup>
import a from "./a.vue"
import b from "./b.vue"
import c from "./c.vue"

const status = ref()
</script>

// 状态模式

<template>
    <div>
        <component :is="stateList[status]"></component>
    </div>
</template>
<script setup>
import a from "./a.vue"
import b from "./b.vue"
import c from "./c.vue"

const status = ref()

const stateList = {
    a,b,c
}
</script>

<template>
    <div>
        <button v-if="query === 'a' || query === 'b'">管理按钮</button>
        <checkbox v-if="query === 'b' || query === 'c'"></checkbox>
        <button v-if="query === 'b'">添加</button>
    </div>
</template>
<script setup>
route = useRoute()
const query = route.query

const status = ref()
</script>

// 状态模式
<template>
    <div>
        <button v-if="statusList[query].managerBtn">管理按钮</button>
        <checkbox v-if="statusList[query].checkbox"></checkbox>
        <button v-if="statusList[query].addBtn">添加</button>
    </div>
</template>
<script setup>
route = useRoute()
const query = route.query
const statusList = {
    a: {
        managerBtn: ture,
        checkbox:false
        addBtn: false
    },
    b: {
        managerBtn: ture,
        checkbox:ture
        addBtn: ture
    },
    c: {
        managerBtn: false,
        checkbox:ture
        addBtn: false
    },
}

const status = ref()
</script>