feat: add vuex-class

README.md

@@ -10,14 +10,116 @@
 
 ```bash
 npm install --save nuxt-class-component
+
+# or
+
+yarn add nuxt-class-component
+```
+
+If use `babel`, install babel plugin:
+
+```bash
+npm install --save-dev babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types
+
+# or
+
+yarn add babel-plugin-syntax-flow babel-plugin-transform-flow-strip-types
+```
+
+Config babel plugins, `nuxt.config.js`:
+
+```js
+module.exports = {
+  build: {
+    babel: {
+      plugins: ['transform-decorators-legacy', 'transform-class-properties']
+    }
+  }
+}
+
 ```
 
 ## Usage
 
-See [vue-class-component](https://github.com/vuejs/vue-class-component) documentation.
+See [vue-class-component](https://github.com/vuejs/vue-class-component), [vuex-class](https://github.com/vuejs/vuex) documentation.
 
 You can also see the [official TypeScript example of Nuxt.js](https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript).
 
+### Example
+
+```js
+import Vue from 'vue'
+import Component from 'nuxt-class-component'
+import {
+  State,
+  Getter,
+  Action,
+  Mutation,
+  namespace
+} from 'vuex-class'
+
+const ModuleGetter = namespace('path/to/module', Getter)
+
+@Component({
+  props: {
+    propMessage: String
+  }
+})
+export class MyComp extends Vue {
+  @State('foo') stateFoo
+  @State(state => state.bar) stateBar
+  @Getter('foo') getterFoo
+  @Action('foo') actionFoo
+  @Mutation('foo') mutationFoo
+  @ModuleGetter('foo') moduleGetterFoo
+
+  // If the argument is omitted, use the property name
+  // for each state/getter/action/mutation type
+  @State foo
+  @Getter bar
+  @Action baz
+  @Mutation qux
+
+  // initial data
+  msg = 123
+
+  // use prop values for initial data
+  helloMsg = 'Hello, ' + this.propMessage
+
+  // lifecycle hooks
+  created () {
+    this.stateFoo // -> store.state.foo
+    this.stateBar // -> store.state.bar
+    this.getterFoo // -> store.getters.foo
+    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
+    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
+    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
+  }
+
+  mounted () {
+    this.greet()
+  }
+
+  fetch () {
+    // fetch data
+  }
+
+  async asyncData () {
+    // async fetching data
+  }
+
+  // computed
+  get computedMsg () {
+    return 'computed ' + this.msg
+  }
+
+  // method
+  greet () {
+    alert('greeting: ' + this.msg)
+  }
+}
+```
+
 ## License
 
 [MIT License](./LICENSE)

lib/index.ts

@@ -1,4 +1,5 @@
 import Component from 'vue-class-component'
+import { State, Getter, Action, Mutation, namespace } from 'vuex-class'
 
 Component.registerHooks([
   'beforeRouteEnter',
@@ -13,4 +14,4 @@ Component.registerHooks([
   'validate'
 ])
 
-export default Component
+export { Component as default, State, Getter, Action, Mutation, namespace }

package.json

@@ -8,7 +8,8 @@
     "build": "tsc -p ."
   },
   "dependencies": {
-    "vue-class-component": "^5.0.1"
+    "vue-class-component": "^5.0.1",
+    "vuex-class": "^0.3.0"
   },
   "devDependencies": {
     "typescript": "^2.3.2"

yarn.lock

@@ -0,0 +1,15 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^2.3.2:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.6.1.tgz#ef39cdea27abac0b500242d6726ab90e0c846631"
+
+vue-class-component@^5.0.1:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-5.0.2.tgz#3dcdc005c58c4e88d8ec2d46e01c74f4d90135c8"
+
+vuex-class@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.0.tgz#25047ab042580fd4ff3e64cc76603ac217c9190d"