时间戳

首页 > 解决方案 > 从 VueJS mixin 访问常量

vue.js - 从 VueJS mixin 访问常量

问题描述

我有这个组件

<script>
const serviceName = 'events'

import { mapState } from 'vuex'

import crud from './mixins/crud'

export default {
    mixins: [crud],

    data() {
        return {
            serviceName: serviceName,

            apiBaseUri: '/api/v1/' + serviceName,
        }
    },

    computed: {
        ...mapState({
            events: state => state.events.data,
        }),
    },

    mounted() {
        this.boot()
    },
}
</script>

它定义了一个 serviceName ，我也需要在这个 crud mixin 中使用它：

import { mapActions, mapMutations, mapState } from 'vuex'

export default {
    data: function() {
        return {
            loading: {
                environment: false,

                table: false,
            },
        }
    },

    computed: {
        ...mapState({
            form: state => state.events.form,
            environment: state => state.environment,
        }),
    },

    methods: {
        ...mapActions(serviceName, ['load']),

        ...mapMutations(serviceName, [
            'setDataUrl',
            'setStoreUrl',
            'setErrors',
            'setFormData',
            'storeFormField',
        ]),

        isLoading() {
            return this.loading.environment || this.loading.table
        },

        boot() {
            this.setDataUrl(this.apiBaseUri)

            this.setStoreUrl(this.apiBaseUri)

            this.load()
        },

        back() {
            this.$router.back()
        },

        storeModel() {
            this.store().then(() => {
                this.load()

                this.back()

                this.clearForm()
            })
        },
    },
}

问题是我总是收到“serviceName is not defined”错误消息，因为在 mapActions() 和 mapMutations() 中使用了 serviceName。

错误发生在

import crud from './mixins/crud'

它完全忽略了window.serviceName之类的东西，我也试过了。

标签： vue.jsmixins

解决方案

我能想到的最简单的解决方案是将serviceName定义移动到另一个文件。例如...

// constants.js
export const SERVICE_NAME = 'events'

然后你可以在需要的地方导入它，例如

// in your component, your mixin, etc
import { SERVICE_NAME as serviceName } from './constants'

推荐阅读