时间戳

首页 > 解决方案 > 如何在 Vue 中创建可重用的外部函数？

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 引用将执行过滤工作的外部文件？

标签： javascriptvue.js

解决方案

您可以创建一个mixin文件并将您的方法放入该 mixin 并将该 mixin 应用到您的组件中。

https://vuejs.org/v2/guide/mixins.html

你的 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，其中将添加唯一方法。

推荐阅读