Work with nuxt about vuex-class-component HOT 9 CLOSED

Yes you're right.
The current version of vuex-class-component doesn't support Nuxt.
I am actually just reading up on nuxt myself.

from vuex-class-component.

I have modified the ExtractVuexModule function to take one extra parameter target: "core" | "nuxt" it is "core" by default.

If you want to use with nuxt simply use the api like this.

{
  modules: {
    user: UserStore.ExtractVuexModule( UserStore, "nuxt" ),
  }
}

Please do test this in your nuxt apps and give feedback on how well it works so I can add it to the official docs.

Thank you.

from vuex-class-component.

Hello, and thanks for your quick response. However I could not get this to work. I get Unexpected token export with webpack:/external "vuex-class-component":1:.

The following syntax is deprecated and will be removed in the next version of nuxt:

{
  modules: {
    user: UserStore.ExtractVuexModule( UserStore, "nuxt" ),
  }
}

Ideally it should work as a module. Every file in /store becomes a module.

It would have been great if it could as a normal module-file(e.g. /store/counter.ts) like this:

import { action, getter, Module, mutation, VuexModule } from 'vuex-class-component'

@Module({ namespacedPath: 'counter/' })
class CounterStore extends VuexModule {
  @getter value = 4

  @mutation increaseValue() {
    this.value++
  }

  @action()
  delayedDecrease(wait: number) {
    return new Promise<number>(resolve => {
      setTimeout(() => {
        resolve(this.value--)
      }, wait)
    })
  }
}

export default CounterStore.ExtractVuexModule( CounterStore, "nuxt" )

from vuex-class-component.

You can export the extracted module like you describe. However you would want to export the class as well, since you need the class to create the proxy or else you'll lose most of the benefits.

import { action, getter, Module, mutation, VuexModule } from 'vuex-class-component'

@Module({ namespacedPath: 'counter/' })
export class CounterStore extends VuexModule {
  @getter value = 4

  @mutation increaseValue() {
    this.value++
  }

  @action()
  delayedDecrease(wait: number) {
    return new Promise<number>(resolve => {
      setTimeout(() => {
        resolve(this.value--)
      }, wait)
    })
  }
}

export default CounterStore.ExtractVuexModule( CounterStore, "nuxt" )

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CounterStore } from '../store/counter'

@Component
export class SomeComponent extends Vue {
  counter = CounterStore.CreateProxy(this.$store, CounterStore)
  
  get count() {
    return counter.value
  }
}
</script>

from vuex-class-component.

Did you get this to work with nuxt? Having CounterStore as the only module e.g /store/counter.ts

I still get Unexpected token export.

from vuex-class-component.

I've got it to work by changing the module type to CommonJS, so when the pull request #16 is approved it should work or you could test it out by running npm i --save-dev https://github.com/asmadsen/vuex-class-component.git or yarn add -D https://github.com/asmadsen/vuex-class-component.git

from vuex-class-component.

Hello @torarnek, @asmadsen. Thanks so much for your help.

I have some concerns about this line: f7d31a1#diff-e5e546dd2eb0351f813d63d1b39dbc48R5

While it may solve the problem of nuxt support, it makes the library unusable for pure JavaScript projects.

You end up with a exports is not defined Reference Error. Something like this.

Uncaught ReferenceError: exports is not defined
    at eval (index.js:8)
    at Module.../dist/index.js (app.js:828)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (user.vuex.js:17)
    at Module../src/vuex/user.vuex.js (app.js:4009)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (store.js?c0d6:1)
    at Module../src/store.js (app.js:3997)

This is why the newer versions of the library uses es2015 module instead of commonjs

Thoughts?

from vuex-class-component.

Hello guys.

I've made some changes to the codebase and the readme.

You can upgrade now and try it out.

from vuex-class-component.

Hello, I can confirm that it works with nuxt. Thank you very much this fix.

from vuex-class-component.