galvez/vue-stator

Is there a proper way to use the "storage helpers" with a Nuxt project?

kulturpessimist opened this issue · 2 comments

First of all, sorry that I open an issue for that simple question but I have not found anything in the documentation and the desired way (as far as I understood) was not working for me with a Nuxt project.

I tried the following:

buildModules: [
    {
      src: 'vue-stator/nuxt',
      options: {
        inject(stator, context, Vue) {
          Vue.nextTick().then(() => {
            stator.$axios = context.$axios
          })
        }
      },
      storage: [
        {
          provider: {
            getItem(key) {
              console.log('storage get', key)
            },
            setItem(key, value) {
              console.log('storage set', key, '=', value)
            }
          },
          namespaces: ['user', 'schema', 'columns']
        }
      ]
    }
]

I also tried it with "storage" inside the options object but I had no luck with both approaches.
Is there a way to use the helper correctly or do I have to live with a workaround like:

inject(stator, context, Vue) {
    Vue.nextTick().then(() => {
        stator.$axios = context.$axios 
        try {
             stator.$state.user = {
                ...stator.$state.user,
                ...JSON.parse(localStorage.getItem('stator::user'))
              }
        } catch (e) {
            console.warn('Error loading local user. Using empty one.')
            localStorage.removeItem('stator::user')
        }
        stator.subscribe('user', (newVal, oldVal) => {
            localStorage.setItem('stator::user', JSON.stringify(newVal))
        })
}

Thank you in advance. Regards Alex

Hmm, not sure why it doesnt work but storage needs to be part of the build options so it needs to be on the same level as 'inject' in your first code block.

Oh well, ok I tried that like

buildModules: [
    {
      src: 'vue-stator/nuxt',
      options: {
        storage: {
          provider: {
            getItem(key) {
              // eslint-disable-next-line no-console
              console.log('storage get', key)
            },
            setItem(key, value) {
              // eslint-disable-next-line no-console
              console.log('storage set', key, '=', value)
            }
    
          },
          namespaces: ['user', 'schema', 'columns']
        },
        inject(stator, context, Vue) {
          Vue.nextTick().then(() => {
            stator.$axios = context.$axios
          })
        }
      }
    }
  ]

but it's not working. I also tried to find it in the source "vue-stator/nuxt/index.js"

options: {
and saw that only mixin and inject are given to the "addPlugin" function. I dont know the internals of Stator and Nuxt good enough to know anything helpful here but even adding a like storage: options.storage did not solve the problem. Maybe my issue should be a feature request? I try to look deeper into it in the next couple of days... Thank you.