在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

像mapMutations等等的Vuex助手返回一个填充了函数的对象,这些函数假定它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>

全球混合

如果您确实希望每个组件都具有此默认mixin而无需明确定义它,请使用全局mixin.

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

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

Vue.mixin(mixin);