Vue:在没有导入语句的组件外使用Vuex存储

Question

在Vue 2/3和ES6环境中，当我想访问外部JS文件(组件外部(中的Vuex存储时，我通常会使用这样的东西：

// example.js
import { store } from '../store/index';
console.log(store.state.currentUser);

这很好，但是，在我当前的环境(没有webpack的Rails 5(中，我们根本不能使用import语句。

问题：在常规ES5 JavaScript中，是否有任何方法可以访问组件之外的Vuex存储

值得注意的是，我已经在我们的前端成功地设置了Vuex，我们只是无法在定义的Vue组件之外访问它。

Answer 1

在我的Rails设置中，我有以下内容：

// app/assets/javascripts/lib/vuex/store.js
const store = new Vuex.Store({
modules: {
activity: activityStore,
}
});

// application.js
//= require vue/dist/vue.min
//= require vuex/dist/vuex.min.js
$(document).ready(function () {
Vue.use(Vuex);
});

在本例中，store只是一个全局javascript对象。使用它就像使用任何其他JS对象一样

只要你在一个经过正确编译的JS文件中，并且你的基础Vue安装正确，你就可以只执行store.state.activity.activities，或者如果你有突变，则执行store.commit('myMutation', 'Hello test')。

我的具体例子是一个调用webhook的巨大函数。webhook可能需要一段时间，我想在收到新消息时向用户发送消息。

示例：

// webhook.js
async webhookFunction() {
// new message recieved
store.commit('newActivity', 'Your object has been updated');
}