vue3中兄弟传值

在vue2中常见的兄弟组件间传值有vuex等，vue3中继续使用发现vuex中值发生变化，然而列表没有更新，百度后得到另一种方法

npm i mitt

传值的组件

<script>
import { ref, reactive, onMounted,getCurrentInstance } from 'vue'
import { useStore } from "vuex"
export default {
    setup() {
        const store = useStore()
        const imgList = reactive([
            {id: '001', url: require('@/assets/images/menu/menu-left1.png')},
            {id: '002', url: require('@/assets/images/menu/menu-left2.png')},
            {id: '003', url: require('@/assets/images/menu/menu-left3.png')},
            {id: '004', url: require('@/assets/images/menu/menu-left4.png')},
            {id: '005', url: require('@/assets/images/menu/menu-left5.png')},
        ])
        let { proxy } = getCurrentInstance()
        let data = reactive({
            foodList: []
        })
        let activeIndex = ref('001') // 记录当前点击菜单的id
        store.state.menuS.menuActiveIndex = '001'
        onMounted(() => {
            store.dispatch('getTestImg',{activeIndex: '001', params:{page:0,size:10}}).then(res => {
                data.foodList=reactive(res)
                proxy.$mitt.emit('mittFn', data.foodList=reactive(res))
            })
        })
        // 更换当前点击的菜单
        function choosenItem(index) {
            activeIndex.value = index
            store.dispatch('getTestImg',{activeIndex:index, params: {page:index/1-1,size:10}}).then(res => {
                proxy.$mitt.emit('mittFn', data.foodList=reactive(res))
            })
        }
        return {
            imgList,
            choosenItem,
            activeIndex,
            data,
        }
    },
}
</script>

被传值的组件

<script>
import { reactive,getCurrentInstance } from 'vue'
export default {
    setup() {
        let { proxy } = getCurrentInstance()
        let data = reactive({
            foodList: []
        })
        proxy.$mitt.on('mittFn', (res) => {
            console.log('mittFn',res)
            data.foodList = res
        })
        function addFoods() {
            // console.log(22,store)
            // console.log(store.dispatch)
            // store.commit.test()
            // store.dispatch('foods',55).then(res => {
            //     console.log(res)
            // })
        }
        return {
            addFoods,
            // foodList,
            data
        }
    },
    data() {
        return {
            defaultImg: 'this.src="'+require('@/assets/images/default/default-img.png')+'"'
        }
    }
}
</script>