Vue：在没有导入语句的情况下在组件外部使用 Vuex 存储

Question

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

// example.js

import { store } from '../store/index';

console.log(store.state.currentUser);

这很好用，但是，在我当前的环境中 (Rails 5 没有 webpack)，我们根本无法使用 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');
}

Vue: Use Vuex store outside of component without Import Statements