如何在 Vuex 中访问 vue 实例答案

【问题标题】：How to access vue instance in Vuex如何在 Vuex 中访问 vue 实例
【发布时间】：2020-06-14 22:25:47
【问题描述】：

我在Vue.js项目的main.js中声明了一个全局变量。

Vue.prototype.$API = "myapihere"

我想在任何地方使用它。并且使用this.$API可以正常工作。

但在 Vuex 中它不起作用。

console.log(this.$API);

这里this.$API 未定义。

我如何在 Vuex 中使用我的 $API。

【问题讨论】：

this 在 vuex 中没有引用 vue 实例，所以它不起作用，试试this._vm。
如果您在单独的文件中有操作、getter 等，则此方法不起作用。
@VinceKronlein 这个问题已经回答了。
是的，但它不正确。当从文件中导入动作、突变等时，这些文件无权访问this._vm，在我的actions.js 文件中this 未定义。
@VinceKronlein 也许...我不确定，我正在为一个逻辑组件编写一个单独的文件，在该文件中我包含该组件的所有内容（操作、状态、突变等） .

标签： javascript vue.js vuex vue-storefront

【解决方案1】：

Vue 2 和 Vuex 3 答案

在store中可以通过this._vm访问vue实例

const store = new Vuex.Store({
  mutations: {
    test(state) {
      console.log(this._vm);
    }
  }
});

【讨论】：

请注意，这在 Vuex 4（Vuex 与 Vue 3 兼容）中不起作用。即使在 Vuex 3 中，它也不是公共 API 的一部分。使用未记录的函数/属性是未来问题的根源......

【解决方案2】：

我正在使用 Vue 3，Vue.prototype.$foo 似乎已在此版本中删除。我还发现在我的 VueX 版本中没有this._vm。

我探索了 Vue 3 文档推荐的 Provide / Inject 方法。这对于从我的组件中访问全局变量非常有效，但我无法从商店中访问它们。

我采用的解决方案是在 Vue 对象上使用 globalProperties，在 store 上使用标准属性，并在安装应用程序之前设置它们。

main.js:

import store from './store/index';
import App from './App.vue';

// Load custom globals
import conf from '@/inc/myapp.config';

const app = createApp(App)
  .use(store);

// Register globals in app and store
app.config.globalProperties.$conf = conf;
store.$conf = conf;

app.mount('#app');

我喜欢这个的地方在于，我可以在商店和组件中以相同的方式访问全局变量。

在组件中：

export default {
  data() {
    return {
    };
  },
  created() {
    console.log( this.$conf.API_URL );
  },
}

...您可以通过操作、突变和 getter 以相同的方式访问 this.$conf.API_URL。

一旦我找到了这个解决方案，我就不再需要从 store 中访问整个 Vue 实例，但是如果你出于某种原因需要它，你可以指定 store.$app = app;在main.js的同一个地方。

【讨论】：

我在Vue 2 docs 中看不到globalProperties 的任何提及，因此您必须阅读一些关于它的内容并进行实验，但我想这个原则仍然有效。我很想知道你过得怎么样。
只在 js 中有效，在 typescript 中不能这样做

【解决方案3】：

您有两种方法：

将属性（或什至从 Vuex 内部访问 _vm 属性）作为组件的参数传递
```
methods: {
  this.$store.dispatch('someAction', this.$API)
}
```

从另一个文件声明并导出相同的变量，并从你的 main.js 和你的 Vuex 文件中使用它：

// api.js
export const API = "http://localhost:5000/api"

// main.js
import { API } from './api.js
...
Vue.prototype.$API = API

// store.js
import { API } from './api.js

// you can use API now!

虽然我个人倾向于第二个，我根本不会将 API 路径存储在 Vue 中，因为我宁愿将 api.js 文件作为服务来执行所有 ajax 调用和从我需要的地方使用该文件。

【讨论】：

【解决方案4】：

使用this._vm

这就是为什么

默认情况下，当您在vuex store 中访问this 时，它将指向store，因此它会输出类似这样的内容

所以在那之后，您会看到这里有一个名为 _vm 的东西

_vm 指向 vue 组件，因此要访问它，您需要使用 this._vue

您可以更好地创建 vue 实例的 getter，例如

const store = new Vuex.Store({
  getters: {
    vue(state) {
      return this._vm
    }
  }
});

//so you can use it across your store
store.getters.vue

//Note
//the above way of accessing getter works on non `namespaced` stores

【讨论】：