Vuex中如何访问vue实例

Question

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

 Vue.prototype.$API = "myapihere"

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

但是在 Vuex 中它不起作用。

 console.log(this.$API);

这里 this.$API 未定义。

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

原文由 Rohit Nishad 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 2 和 Vuex 3 答案

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

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

原文由 Pierre Said 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 的同一个地方。

原文由 Vilāsamuni 发布，翻译遵循 CC BY-SA 4.0 许可协议