From 44ae584c0d9f59030f5ee5871caa04e6fe1bb331 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Olivera?= <matiasolivera@outlook.com>
Date: Sun, 23 Dec 2018 20:48:56 -0300
Subject: [PATCH] (docs) Add how to access the state

---
 README.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/README.md b/README.md
index b161619..ececd7b 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,61 @@ $ npm install --save vuex-class
 $ yarn add vuex-class
 ```
 
+## Usage
+
+### State
+
+#### Flat state
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { State } from 'vuex-class'
+
+@Component
+export class MyComp extends Vue {
+  @State('foo') stateFoo
+
+  // If the argument is omitted, use the state property name
+  @State bar
+
+  created () {
+    this.stateFoo // -> store.state.foo
+    this.bar // -> store.state.bar
+  }
+}
+```
+
+#### Nested state
+
+Using the dot notation to access a nested state property doesn't work.
+
+```js
+@State('state.bar') stateBar
+```
+
+Why doesn't the library support this feature?
+
+- It's impossible to type check.
+- It would provide poor error message if there is typo on property name.
+
+You need to use a lambda function instead.
+
+```js
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { State } from 'vuex-class'
+
+@Component
+export class MyComp extends Vue {
+  @State(state => state.bar) stateBar
+
+  created () {
+    this.stateBar // -> store.state.bar
+  }
+}
+```
+
 ## Example
 
 ```js