我正在创建一个基本的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>
答案 0 :(得分:6)
像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以在特定组件中导入。
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);
就个人而言,作为标准,我从不映射状态或突变。
我只映射getter和actions,因此我的组件不需要知道状态结构,并且操作是异步的。我将getter和actions视为Vuex商店(或任何类似商店,如Redux)的公共API。
我也只映射相关数据。组件的职责是与应用程序的用户交互,显示和处理事件,仅此而已。如果您的所有组件都需要user
对象,那么他们可能会做太多而且逻辑应该移动到其他位置,就像在操作中一样。