在 SPA VueJS 中全局声明 mapState 和 mapMutations

Question

我正在创建一个基本的 SPA，但碰巧我用 Vuex 管理的状态和上面的突变都很好，但是在我想使用 mapState 和 mapMutations 的每个组件中，我必须在本地导入它们。

<script>
    import {mapState,mapMutations  } from 'vuex';
    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

这是正确的做法吗？或者如何在全局声明它们并避免在每个组件中导入，以便如下所示？

<script>   

    export default{
        computed : mapState(['isLoggedIn']),
        methods: {
            ...mapMutations(['logout'])
        }
    }
</script>

Answer 1

快速解决方案

Vuex 助手，如 mapMutations 等。returns 一个填充有函数的对象，假设 this.$store 是一个 Vuex 存储。

门店服务

如果你需要在 vanilla JS 中使用商店并且你不想到处暴露商店模块，你可以定义一个服务模块。

import { mapActions } from 'vuex';
import $store from '@/store';

/**
 * Simple mapping of the Vuex store UI module.
 * @module services/ui
 * @property {Function} pushMessage
 */
export default Object.assign({
    $store,
}, mapActions('ui', ['pushMessage']));

现在，使用它就像导入服务模块一样简单。

import ui from './services/ui';

// triggers the `pushAction` on the ui namespaced store module
ui.pushMessage({ content: 'whatever' });

Vue mixin

要在 Vue 组件上使用默认计算和方法，您可以创建一个简单的 mixin 以导入特定组件。

import { mapState, mapMutations } from 'vuex';

export default {
    computed : mapState(['isLoggedIn']),
    methods: mapMutations(['logout'])
}

然后，在组件中使用 mixin。

<script>
import mixin from './mixin';

export default {
  mixins: [mixin],
  data() {/* ... */},
  // etc.
}
</script>

Global mixin

如果你真的希望每个组件都有这个默认的 mixin 而不必显式定义它，请使用全局 mixin。

import Vue from 'vue';
import { mapState, mapMutations } from 'vuex';

export const mixin = {
    computed : mapState(['isLoggedIn']),
    methods: mapMutations(['logout'])
};

Vue.mixin(mixin);

就个人而言，作为标准，我从不映射状态或突变。

我只映射 getter 和动作，因此我的组件不需要知道状态结构以及动作是否异步。我将吸气剂和动作视为 Vuex 商店（或任何类似商店，如 Redux）的 public API。

我也只贴图相关数据。组件的职责是与应用程序的用户交互，显示和处理事件，仅此而已。如果你所有的组件都需要 user 对象，也许它们做的太多了，那个逻辑可能应该移动到别处，比如在一个动作中。

更多信息见

在 SPA VueJS 中全局声明 mapState 和 mapMutations

declare mapState and mapMutations globally in SPA VueJS

javascript

vue.js

vuex

快速解决方案

门店服务

Vue mixin

Global mixin