Storybook模板在args变更时不重渲染，如何手动强制重渲染？

直接修改args.showModal后模板没重渲染，核心原因是args不是Vue的响应式对象，Vue没法检测到它的属性变化，自然不会触发更新。这里给你几个可行的解决方法：

方法1：把args转成响应式对象 #

用Vue的reactive把args包装成响应式状态，修改属性时Vue就能自动检测到变化：

import Modal from '@/components/general/Modal.vue'
import { reactive } from 'vue'

export default {
    title: 'General/Modal',
    component: Modal,
    argTypes: {},
}

const Template = (args) => ({
    props: Object.keys(args),
    setup () {
        // 将args转为响应式对象
        const state = reactive(args)
        return { state }
    },
    components: { Modal },
    methods: {
        closeModal: () => {
            state.showModal = false // 现在修改会触发模板重渲染
        }
    },
    template: `
      <Modal v-if="state.showModal" @close="closeModal">
        <template v-slot:header>
          custom header
        </template>
      </Modal>
    `,
})

export const Default = Template.bind({})
Default.args = { showModal: false }

方法2：用Storybook的updateArgs手动更新 #

Storybook提供了useArgs钩子，能获取到updateArgs方法，调用它更新args就能强制组件重渲染：

import Modal from '@/components/general/Modal.vue'
import { useArgs } from '@storybook/vue3' // Vue2项目换成@storybook/vue

export default {
    title: 'General/Modal',
    component: Modal,
    argTypes: {},
}

const Template = (args) => ({
    props: Object.keys(args),
    setup () {
        const [_, updateArgs] = useArgs()
        return { updateArgs }
    },
    components: { Modal },
    methods: {
        closeModal: () => {
            // 调用updateArgs更新参数，触发重渲染
            updateArgs({ showModal: false })
        }
    },
    template: `
      <Modal v-if="showModal" @close="closeModal">
        <template v-slot:header>
          custom header
        </template>
      </Modal>
    `,
})

export const Default = Template.bind({})
Default.args = { showModal: false }

方法3：通过props双向绑定更新 #

把showModal作为组件props，通过emit触发参数更新，利用Storybook的arg双向绑定机制：

import Modal from '@/components/general/Modal.vue'

export default {
    title: 'General/Modal',
    component: Modal,
    argTypes: {},
}

const Template = (args) => ({
    props: ['showModal'],
    setup (props, { emit }) {
        return {
            closeModal: () => {
                emit('update:showModal', false)
            }
        }
    },
    components: { Modal },
    template: `
      <Modal v-if="showModal" @close="closeModal">
        <template v-slot:header>
          custom header
        </template>
      </Modal>
    `,
})

export const Default = Template.bind({})
Default.args = { showModal: false }
Default.argTypes = {
  showModal: {
    control: 'boolean',
    description: '控制模态框显示/隐藏',
  }
}

内容的提问来源于stack exchange，提问作者van_folmert