如何在js文件中使用mapState？

【问题标题】：How to use mapState in js files?如何在js文件中使用mapState？
【发布时间】：2019-08-02 09:33:22
【问题描述】：

我想在 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。

【问题讨论】：

【解决方案1】：

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

但是，它可以像这样工作：

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

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

你可以在这里看到mapState的实现：

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

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

【讨论】：