javascript - 如何在 Vuex 中访问 vue 实例

Question

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

Vue.prototype.$API = "myapihere"

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

但是在 Vuex 中它不起作用。

console.log(this.$API);

这this.$API是未定义的。

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

Answer 1

Vue 2 和 Vuex 3 答案

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

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

Answer 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 );
  },
}

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

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

Answer 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 调用并从我需要的地方使用该文件。

Answer 4

利用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 

Answer 5

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

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

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