想请教大家，一个关于vue3写法的问题？谢谢大家？

Question

<template>
    <div>
        <!-- 右边菜单 -->
        <div class="right-window" :class="{ hide: !showMenu }">
            <!-- 头部 -->
            <div class="site" @click="click_index">
                <image src="../static/images/shou_logo.png" style="width: 316rpx;height: 62rpx;"></image>
            </div>
            <!-- 导航 -->
            <template v-if="store.categorys.length > 0">
                <div style="display: flex;margin: 30rpx;padding: 15rpx;">
                    
                     <el-select v-model="value" filterable placeholder="请输入内容" @change='change'>
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                      
                </div>

                <right-menu @select="select" :activeKey="activeKey" />
            </template>
            <!-- 底部 -->
            <div class="footer">
                <a class="link" href="https://beian.miit.gov.cn/" target="_blank" type="primary">@{{ siteYear }}
                    {{ siteNumber }}</a>
            </div>
        </div>
        <!-- 小屏幕显示菜单按钮 -->
        <match-media v-if="!showMenu" :max-width="956">
            <div class="left-icon">
                <Icon color="#a6a6a6" :size="28">
                    <ChevronCircleLeft @click="showRightMenu" />
                </Icon>
            </div>
        </match-media>
        <!-- 抽屉遮罩 -->
        <bg-cover :show="showCover && showMenu" :top="60" @click="showMenu = false" />
    </div>
</template>

<script>
    export default {
    data() {
      return {
        options: [],
        value: ''
      }
    },
    methods: {
        change(e){
            router.navigateTo(`index/index?category=${e}`)
        },
        click_index(){
            router.navigateTo(`index/index?category=常用功能`)
        }
    },
    mounted() {
        
        call('category_search', {
        }).then(res => {
            this.options = res.data.sort((a, b) => {
            if (a.value.startsWith("如何")) {
                return -1;
            }
            if (b.value.startsWith("如何")) {
                return 1;
            }
            return a.value < b.value ? -1 : 1;
        })
            
            
                                                                                                            
            
            console.log(res.data,9999) 
        })
        
        
        const device = navigator.userAgent
        
        console.log(device,999)
        
        if (device.indexOf('iPad') > -1) {
          //  ipad 
            this.is_pc = false
                 
          } else if (device.indexOf('Android') > -1 || device.indexOf('iPhone') > -1) {
          // 手机
            this.is_pc = false    
            console.log(this.showMenu,'showMenu')
            this.showMenu = true
            this.showCover = true
            console.log(this.showMenu,'showMenu')
            // this.is_pc = true    
          } else {
          // 电脑
            this.is_pc = true
            // this.is_pc = false
          }
          
          
    }
  }
  
</script>    

<script setup>
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        useStore
    } from '@/stores/index.js'
    import {
        Icon
    } from '@vicons/utils'
    import {
        ChevronCircleLeft,
        Search
    } from '@vicons/fa'
    import rightMenu from './components/rightMenu.vue'
    import {
        siteName,
        siteYear,
        siteNumber
    } from '@/config/site.js'
    
    const store = useStore()
    
    const category = ref('')

    uni.$on('setRightStyle', obj => {
        if (obj.type === 'showRightMenu') {
            showMenu.value = obj.data.showMenu
            showCover.value = obj.data.showCover
        }
        if (obj.type === 'putRightMenuActiveKey') {
            activeKey.value = obj.data
        }
        
        onLoad(options => {
            category.value = options.category;
        })
    })

    const showMenu = ref(false)
    const showCover = ref(false)
    const activeKey = ref('')
    const keywords = ref('')

    const showRightMenu = () => {
        showMenu.value = true
        showCover.value = true
    }

    const select = () => {
        if (showCover.value) {
            showMenu.value = false
        }
    }

</script>

<script setup> 里有showMenu 和 showCover

我想判断是否是手机端，如果是手机端 就在mounted 里写
this.showMenu = true
this.showCover = true

但是我发现这样没有生效，请问如何改这种值？

Answer 1

既然使用了setup为啥还要混着options的写法呢，建议直接在setup中写mounted的逻辑

import { onMounted } from 'vue'

onMounted(() => {
   if (手机端) {
     showMenu.value = true
     showCover.value = true
   }
})

Answer 2

<script setup>中声明的值不与 option 写法中的 data 互通，只能在其中一种写法中修改