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

Z时代
2024-03-09
分类：IT

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()
        };
    }});