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

Question

随着我的项目不断扩大，我注意到很多重复。我从导航按钮开始，因为它们可以出现在多个位置（侧边菜单、导航栏）。

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

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

Answer 1

您可以创建一个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，其中将添加唯一方法。

Answer 2

我最终创建了一个 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 的 store 确定身份验证状态，并使用 mapgetters 检索它。

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