js模块拆分函数的问题？

Question

脑子瓦特了，想不出好办法……

bus.js:

import method from "./method"

const dataBus = ref({
    status:{
        show: false
    },
    method: {
        // ...
        xx: method.xx
    }
})
export function useDataBus() {
    return dataBus
}

method.js

function xx(){
    console.log(dataBus.value.status.show)
}
export default {
    xx
}

就这样的结构，如果把dataBus放在method里倒是能运行，但总感觉很怪，这个应该怎么拆分呢？

Answer 1

根据你的描述，我理解你method.js里面应该都是一些纯方法，你目前直接写了个变量dataBus肯定是有问题的。这种情况，这些方法里面应该用this比较适合。
你可以在函数xx里面，把dataBus.value替换成this。

那么如果换成了this，就要看你最终是如何调用这个方法的了。

如果你最终使用是这样类似的代码

import { useDataBus } from './bus.js'
const dataBus = useDataBus()
dataBus.value.methods.xx()

那么你还需要将dataBus.methods里面的所有方法的this指向都修改一下

在bus.js里面加上一段

Object.keys(dataBus.value.methods).forEach(key => {
  dataBus.value.methods[key] = dataBus.value.methods[key].bind(dataBus.value)
})

Answer 2

你直接

const dataBus = ref({
    status:{
        show: false
    },
    method: method
})

不就好了吗....

Answer 3

解构

const dataBus = ref({
    status:{
        show: false
    },
    method: {
        ...method
    }
})

Answer 4

如果你的目的就是获取show的状态，可以使用计算属性吧
另外，我觉得你这个写法里面，xx这个函数应该传参数进去的，

method:{
    xx:method.xx(dataBus)
}

相应的要把methods里面的函数改一下

Answer 5

// method.js
function xx(dataBus){
    console.log(dataBus.value.status.show)
}
export default {
    xx
}

// bus.js
import method from "./method"

const dataBus = ref({
    status:{
        show: false
    }
})

export function useDataBus() {
    return {
        ...dataBus,
        method: {
            xx: () => method.xx(dataBus)
        }
    }
}

或者：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// method.js
import { EventBus } from './eventBus';

function xx(){
    EventBus.$on('statusChanged', status => {
        console.log(status.show);
    });
}
export default {
    xx
}

// bus.js
import { EventBus } from './eventBus';
import method from "./method"

const dataBus = ref({
    status:{
        show: false
    }
})

export function useDataBus() {
    return {
        ...dataBus,
        method: {
            xx: () => {
                EventBus.$emit('statusChanged', dataBus.value.status);
                method.xx();
            }
        }
    }
}