16

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

Vue.prototype.$API = "myapihere"

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

但是在 Vuex 中它不起作用。

console.log(this.$API);

这this.$API是未定义的。

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

4

5 回答 5

20

Vue 2 和 Vuex 3 答案

在商店中，您可以通过访问来访问 vue 实例this._vm

const store = new Vuex.Store({
  mutations: {
    test(state) {
      console.log(this._vm);
    }
  }
});
于 2020-03-02T15:35:39.977 回答
7

我正在使用 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 );
  },
}

...您可以this.$conf.API_URL以相同的方式从动作、突变和吸气剂中访问。

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

于 2021-04-23T12:08:04.857 回答
3

您有两种方法：

  1. 将属性（甚至_vm从 Vuex 内部访问属性）作为参数传递给组件

    methods: {
  this.$store.dispatch('someAction', this.$API)
}

  2. 从另一个文件声明并导出相同的变量，并从您的 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 调用并从我需要的地方使用该文件。

于 2020-03-02T15:43:35.053 回答
2

利用this._vm

这就是为什么

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

在此处输入图像描述

所以在那之后，你会看到这里有一个叫做_vmin store 的东西在此处输入图像描述

以便_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
于 2020-09-15T09:22:25.920 回答
0

截至最近，在 Vuex 4.* 和 Vue 3.* 下，this.$app还没有为 store 对象定义。相反，您将 Vue 路由器定义为this.$router.

因此，对于 javascript，在商店中获取应用程序的方式如下：

代码现在是：router.app = app;并且在里面，比如说，一个动作：let app = this.$router.app;

于 2022-02-06T15:40:25.920 回答