vue3单独讲store的action封装不起作用？

Question

lib.ts:

import { Store, useStore } from 'vuex';

export const getLang = (): ComputedRef<SupportLanguageType> => {
    const store: Store<RootState> = useStore();

    return computed(() => store.state.language);
};

export const toogleMenu = async (status?: boolean): Promise<void> => {
    const store: Store<RootState> = useStore();

    return store.dispatch('toogleSideShrink', status);
};

test.vue:

<button @click="toogleMenu">{{ language }}</button>

<script lang="ts">
import { defineComponent } from 'vue';
import { getLang, toogleMenu } from './lib';

export default defineComponent({
    setup() {
        return {
            language: getLang(),
            toogleMenu
        };
    }
});
</script>

language的获取没有问题，也会跟着store里面的数据变化，但是toogleMenu方法点击就报store是undefined，就很好奇为啥，感觉与响应式和vue生命周期有关系，但是试了很多办法都不行，感觉dispatch不能单独使用，只能这么写：

// test.vue
export default defineComponent({
    setup() {
        const store: Store<RootState> = useStore();
        const toogleMenu = (status?: boolean) => store.dispatch('toogleSideShrink', status);

        return {
            language: getLang(),
            toogleMenu
        };
    }
});

或者

// lib.ts
export const toogleMenu = {
    methods: {
        async toogleMenu(status?: boolean): Promise<void> {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            //@ts-ignore
            return await this.$store.dispatch('toogleSideShrink', status);
        }
    }
};

// test.vue
export default defineComponent({
    mixins: [toogleMenu],
    setup() {
        return {
            language: getLang()
        };
    }
});

有知道的大神能解释一下不o(￣︶￣)o

Answer 1

看不懂为什么要这么写，是因为ts引用很麻烦吗？第一个应该直接定义getters，第二个是因为上下文关系的原因，可以再包一层，在setup里执行返回一个方法进行绑定。
推荐使用const store = inject('store')
想要更简单使用的vuex实现类型提示，请看我发布的文章！