如何在Vuex中访问vue实例

Question

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

Vue.prototype.$API = "myapihere"

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

但是在 Vuex 中它不起作用。

console.log(this.$API);

这里this.$API是undefined。

我如何$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 对象上使用globalPropertiesstore并在 上使用标准属性，并在安装应用程序之前设置它们。

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。