Javascript 如何在Vuex中访问vue实例

我在Vue.js项目的

main.js

中声明了一个全局变量

Vue.prototype.$API = "myapihere"

我想在任何地方使用这个。 通过使用

this.$API

它可以正常工作

但在Vuex中，它不起作用

console.log(this.$API);

此处

this.$API

未定义

---

如何在Vuex中使用我的

$API

。

在应用商店中，您可以通过访问

此来访问vue实例。\u vm

const store=新的Vuex.store({
突变：{
测试（状态）{
console.log（this.\u vm）；
}
}
});

您有两种方法：

将属性作为组件的参数传递（甚至从Vuex内部访问

\u vm

属性）

methods: {
  this.$store.dispatch('someAction', this.$API)
}

从另一个文件声明并导出同一变量，并从main.js和Vuex文件中使用该变量：

// api.js
export const API = "http://localhost:5000/api"

---

尽管我个人倾向于第二种方法，我根本不会将API路径存储在Vue中，因为我宁愿将

API.js

文件作为一种服务来执行所有ajax调用，并从我需要的地方使用该文件。

使用

这个。\u vm

这就是原因

默认情况下，当您在

vuex store

中访问

this

时，它将指向

store

，因此它将输出如下内容

在那之后，你会看到这里有一个叫做

\u vm

的东西

因此，

\u vm

指向vue组件，因此要访问它，您需要使用

此选项。\u vue

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

const store=新的Vuex.store({
吸气剂：{
vue（州）{
把这个还给我
}
}
});
//所以你可以在你的商店里使用它
store.getters.vue
//注
//上述访问getter的方法适用于非“名称空间”存储

我正在使用Vue 3和

Vue.prototype.$foo

似乎已被删除。我还发现在我的VueX版本中没有

这个

我探索了Vue 3文档推荐的方法。这对于从我的组件中访问全局文件非常有效，但我无法从存储中访问它们

我选择的解决方案是在
商店
上的Vue对象和标准属性上使用，并在安装应用程序之前设置它们

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');

我喜欢的是，我可以在存储区和组件中以相同的方式访问globals

在组件中：

export default {
  data() {
    return {
    };
  },
  created() {
    console.log( this.$conf.API_URL );
  },
}

…您可以通过操作、突变和getter以相同的方式访问
this.$conf.API_URL

找到此解决方案后，我不再需要从应用商店内访问整个Vue实例，但如果出于某种原因需要，您可以分配
应用商店。$app=app
；在
main.js
中的同一位置，vuex中的此
不引用vue实例，这就是它不工作的原因，请尝试
this.\u vm
。
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 );
  },
}