[Vuejs]-Vue: Use Vuex store outside of component without Import Statements

by

0👍

✅

In my Rails setup, I have this:

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

});

In this instance, store is just a global javascript object. Use it the same as you would any other JS object.

As long as you’re inside a JS file that is properly compiled, and your base Vue is installed properly, you can just do store.state.activity.activities, or if you have mutations, store.commit('myMutation', 'Hello test').

My specific example was a huge function calling a webhook. The webhook can take a while, and I want to send messages to the user as I get new messages.

Example:

// webhook.js

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

Leave a comment