Add CodeSandbox examples

Author: maoberlehner

README.md

@@ -76,6 +76,8 @@ export default {
 </script>
 ```
 
+[![Edit basic example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/94l98vx0p4)
+
 ### Nested properties
 
 Oftentimes you want to have nested properties in the Vuex store. `vuex-map-fields` supports nested data structures by utilizing the object dot string notation.
@@ -142,6 +144,8 @@ export default {
 </script>
 ```
 
+[![Edit nested properties example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/38y88yvoo1)
+
 ### Rename properties
 
 Sometimes you might want to give your computed properties different names than what you're using in the Vuex store. Renaming properties is made possible by passing an object of fields to the `mapFields` function instead of an array.
@@ -168,6 +172,8 @@ export default {
 </script>
 ```
 
+[![Edit rename properties example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/7yowrm6j4x)
+
 ### Custom getters and mutations
 
 By default `vuex-map-fields` is searching for the given properties starting from the root of your state object. Depending on the size of your application, the state object might become quite big and therefore updating the state starting from the root might become a performance issue. To circumvent such problems, it is possible to create a custom `mapFields()` function which is configured to access custom mutation and getter functions which don't start from the root of the state object but are accessing a specific point of the state.
@@ -242,6 +248,8 @@ export default {
 </script>
 ```
 
+[![Edit custom getters and mutations example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4rroy51z8x)
+
 ### Vuex modules
 
 Vuex makes it possible to divide the store into modules.
@@ -311,6 +319,8 @@ export default {
 </script>
 ```
 
+[![Edit Vuex modules example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mo7j05j6vy)
+
 ### Namespaced Vuex modules
 
 By default, mutations and getters inside modules are registered under the global namespace – but you can mark modules as `namespaced` which prevents naming clashes of mutations and getters between modules.
@@ -370,6 +380,8 @@ export default {
 </script>
 ```
 
+[![Edit namespaced Vuex modules example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mly87n06p)
+
 Or you can pass the module namespace string as the first argument of the `mapFields()` function.
 
 ```html
@@ -391,6 +403,8 @@ export default {
 </script>
 ```
 
+[![Edit namespaced Vuex modules example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/m51j02794p)
+
 ### Multi-row fields
 
 If you want to build a form which allows the user to enter multiple rows of a specific data type with multiple fields (e.g. multiple addresses) you can use the multi-row field mapping function.
@@ -451,6 +465,8 @@ export default {
 </script>
 ```
 
+[![Edit multi-row fields example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yj1xxx8kn1)
+
 ## Upgrade from 0.x.x to 1.x.x
 
 Instead of accessing the state directly, since the 1.0.0 release, in order to enable the ability to implement custom getters and mutations, `vuex-map-fields` is using a getter function to access the state. This makes it necessary to add a getter function to your Vuex store.