Vuex中如何访问vue实例

新手上路,请多包涵

我在 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 许可协议

阅读 1.1k
2 个回答

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 许可协议

我正在使用 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题