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

Question

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

我试过了

import { mapState } from 'vuex';

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

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

但它不起作用。错误是

TypeError: foo.axios.get is not a function

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

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

Answer 1

我不确定使用 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 对象上没有这样的魔法，所以我们只需要将函数作为函数调用即可。计算属性的其他好处(例如缓存)也将丢失。