javascript - 如何在js文件中使用mapState？

我想使用Vue.js中的.js从mapState文件访问状态。

我试过了

import { mapState } from 'vuex';

const foo = {
  ...mapState(['axios']),
};

foo.axios.get('...');

但这不起作用。错误是

TypeError: foo.axios.get is not a function

我应该怎么做才能做到这一点？

我已经搜索了其他问题，但是他们从store.state. ...访问而不是使用我想要的mapState。

最佳答案

我不确定使用mapState是个好主意，因为它非常打算用作在组件上创建计算属性的一种方式。

但是，可以使它像这样工作:

const foo = {
  $store: store,
  ...mapState(['axios'])
};

foo.axios().get('...');

您可以在此处查看mapState的实现:

https://github.com/vuejs/vuex/blob/dev/src/helpers.js#L7

请注意，它依赖this.$store来获得对商店的引用。在组件上，它将自动注入(inject)，但是对于您的对象，需要手动添加。

要注意的另一件事是，我必须调用axios()作为一种方法。组件上的计算属性定义为函数，但可以作为属性访问，但是魔术是由Vue在内部执行的。在像这样的普通JavaScript对象上，没有这种魔力，因此我们只需要将函数作为函数调用即可。计算属性的其他好处(例如缓存)也将丢失。