Vuex中如何访问vue实例

Question

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

Vue.prototype.$API = "myapihere"

而且我想随时随地使用它。并且使用 this.$API.

可以正常工作

但是在 Vuex 中是行不通的。

console.log(this.$API);

此处this.$API是未定义。

我如何在 Vuex 中使用 $API。

Answer 1

Vue 2 和 Vuex 3 回答

在商店中您可以通过访问this._vm

来访问vue实例

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

Answer 2

你有两种方法：

传递属性（甚至从 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!

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

Answer 3

使用this._vm

原因如下

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

所以在那之后，你会看到这里有一个叫做 _vm 的东西

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

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

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

Answer 4

我正在使用 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.

的同一个地方

Answer 5

截至最近，在 Vuex 4.* 和 Vue 3.* 下，尚未为商店对象定义 this.$app。相反，您将 Vue Router 定义为 this.$router.

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

代码现在是：router.app = app; 并且在内部，比方说，一个动作：let app = this.$router.app;

Vuex中如何访问vue实例

How to access vue instance in Vuex

javascript

vue.js

vuex

vue-storefront