Javascript 如何在Vue中创建可重用的外部函数？

随着我的项目的发展，我注意到了很多重复。我从导航按钮开始，因为它们可以出现在多个地方的侧菜单，导航栏

我想集中它们，让组件根据需要导入它们。因此，我尝试创建此文件来保存我的所有菜单项：

// menuItems.js

export default {
    data() {
        return {
            items: [
                { title: 'Profile', icon: 'mdi-account-circle', reqAuth: true, hideOnAuth: false},
                { title: 'Dashboard', icon: 'mdi-view-dashboard', reqAuth: true, hideOnAuth: false },
                { title: 'Settings', icon: 'mdi-cog', reqAuth: true, hideOnAuth: false },
                { title: 'Signup', icon: 'mdi-account-circle-outline', reqAuth: false, hideOnAuth: true},
                { title: 'Login', icon: 'mdi-login', reqAuth: false, hideOnAuth: true  },
                { title: 'Logout', icon: 'mdi-logout', reqAuth: true, hideOnAuth: false},
            ]
        }
    },
    methods: {
        menuItems: function(authenticated) {
            if (!authenticated) {
                // Gets items that do and don't require Auth, except for ones that should hide on Auth
                return this.items.filter(o => o.reqAuth || !o.reqAuth && !o.hideOnAuth)
            }
            // Gets items that don't require Auth
            return this.items.filter(o => !o.reqAuth)
        }
    }
}

按钮可以要求身份验证可见，并且在身份验证后也可以隐藏，例如登录按钮

现在让我们假设我的导航栏有一个vue组件，如何在返回过滤项的方法中导入

// NavBarComponent.vue

<template>
    <div>
        <v-btn v-for="(item, i) in menuItems(authenticated)">
            {{ item.title }}
        </v-btn>
    </div>

</template>

<script>
    export default {
        name: "NavBarComponent",
        data() {
            return {
                authenticated: true,
            }
        },
        methods: {

        }
    }
</script>

在这种情况下，如何使组件中的menuItems引用执行筛选工作的外部文件？

您可以创建一个mixin文件，并将方法放入该mixin中，然后在组件中应用mixin

您的混音将如下所示：

// /mixins/menuItemsMixin.js
const menuItemsMixin= {
  data() {
        return {
            items: [
                { title: 'Profile', icon: 'mdi-account-circle', reqAuth: true, hideOnAuth: false},
                { title: 'Dashboard', icon: 'mdi-view-dashboard', reqAuth: true, hideOnAuth: false },
                { title: 'Settings', icon: 'mdi-cog', reqAuth: true, hideOnAuth: false },
                { title: 'Signup', icon: 'mdi-account-circle-outline', reqAuth: false, hideOnAuth: true},
                { title: 'Login', icon: 'mdi-login', reqAuth: false, hideOnAuth: true  },
                { title: 'Logout', icon: 'mdi-logout', reqAuth: true, hideOnAuth: false},
            ]
        }
    },
    methods: {
        menuItems: function(authenticated) {
            if (!authenticated) {
                // Gets items that do and don't require Auth, except for ones that should hide on Auth
                return this.items.filter(o => o.reqAuth || !o.reqAuth && !o.hideOnAuth)
            }
            // Gets items that don't require Auth
            return this.items.filter(o => !o.reqAuth)
        }
    }
};

export default menuItemsMixin

在您的组件中：

// NavBarComponent.vue


<script>
    import menuItemsMixin from './mixins/menuItemsMixin.js'
    export default {
        mixins:[menuItemsMixin]
    }
</script>

---

您可以在多个组件中导入此mixin，也可以在此组件中添加更多mixin，其中将添加唯一的方法。

我最终创建了一个javascript文件：

// views.js

export const views = [
    {title: 'Dashboard'},
    {title: 'Profile'},
    {title: 'Login/Signup'},
]

然后在我的导航栏组件中，我像这样导入了它：

    import {mapGetters} from "vuex";
    import {views} from "../../common/views";

    export default {
        data: () => ({
            items: views
        }),

        computed: {
            ...mapGetters(['isAuthenticated',])
            menuItems: function (){
                if (this.isAuthenticated) {
                    // do this
                } else {
                    // do this
                }
            },
        }
    }

然后我对过滤函数也做了同样的操作，但是如果每个组件中都需要的话，我也可以根据需要对其重新编码。我使用Vuex的存储确定身份验证状态，并使用MapGetter检索它

<componentA v-if='isAuthenticated'>
     <navItem v-for='item in menuItems'>
</componentA>