Vuex Helpers 的最佳实践答案

【问题标题】：Best practice for Vuex HelpersVuex Helpers 的最佳实践
【发布时间】：2018-06-13 12:24:18
【问题描述】：

我获取 Vuex Helpers 的 mixin 如下所示：

import { createNamespacedHelpers } from 'vuex';
const { mapGetters, mapActions } = createNamespacedHelpers('displayfood');

export default {
    computed:{
        ...mapGetters([
            'food',
            ( ... )
        ]),
    },
    methods:{
        ...mapActions([
            'fetchFood',
             ( ... )
        ]),
    }
}

我有一个包含大约 12 个组件（包括嵌套）的大组件。对于每个需要我需要调用的数据的子组件：

import displayFood from '@js/mixins/displayFood';

export default { mixins:[displayFood] }

有没有其他方法不用一直写 import & mixins？（除了 Global Mixin）

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

不，mixin 将在本地或全局定义。

或者您可以仅将 getter 和操作保留在顶级组件中，然后将其传递给子组件。这将使您的孩子更易于重用、更易于测试并且整个组件树更易于重构。

每次您从组件访问外部数据（您的 vuex 存储）而不是使用道具和事件时，都会将每个组件耦合到数据存储。

【讨论】：