[SOLVED] Nuxt: How to access store in rollbar.js WITHOUT using localStorage?

Nuxt: How to access store in rollbar.js WITHOUT using localStorage?

I am using Nuxt and Rollbar. I have a user id state in store.
My question is, how can I set this user id as a custom payload in the transformer function in rollbar.js WITHOUT using localStorage?

Here is my code:

// plugins/rollbar.js
const transformer = function(payload) {
  payload.user_id = user_id_from_store // how to get this from store?
}

// store/index.js
export const state = () => ({
  userId: ''
})
export const mutations = {
  setUserId(state, userId) {
    state.userId = userId
  }
}

//components/MyComponent.vue
methods: {
  fetch() {
    const userId = fetchUserId()
    this.$store.commit('setUserId', userId)
  }
}

Things I have tried:

In rollbar.js, create and export a function which takes a context object as argument. Then call this function in transformer function to get user_id:

// plugins/rollbar.js
const getUserId = context => {
  const user_id = context.store.state.userId
  return user_id
}

const transformer = function(payload) {
  payload.user_id = getUserId()
}

export default getUserId

When I console.log(context.store)in getUserId function, I got a Store object, but calling the function in transformer function threw Rollbar: Error while calling custom transform() function. Removing custom transform(). TypeError: Cannot read property 'store' of undefined.

Solution

At the end, OP succeeded thanks to inject, more info available here: https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context

This one is indeed needed for libraries that are not directly into the Vue ecosystem but that we wish to have working in our Nuxt app.