GitBook: [v28] one page modified

Author: christianalfoni

views/vue.md

@@ -133,55 +133,68 @@ createApp(withOvermind(overmind, App)).mount('#app')
 {% endtab %}
 {% endtabs %}
 
-### Reference specific state and actions
+### Accessing state in setup
+
+You have to point to `.value` to access state from the hook with setup.
 
 {% tabs %}
 {% tab title="components/SomeComponent.vue" %}
 ```javascript
-<template>
-  <div @click="actions.onClick">
-    {{ state.foo }}
-  </div>
-</template>
 <script>
   import { hooks } from '../overmind'
 
   export default {
     setup() {
-      const state = hooks.state(state => state.admin)
-      const actions = hooks.actions(actions => actions.admin)
+      const state = hooks.state()
+      const actions = hooks.actions()
 
-      return { state, actions }
+      return {
+        foo: state.value.foo,
+        actions
+      }
+
+      // JSX
+      return () => (
+        <div onClick={actions.onClick}>{state.value.foo}</div>
+      )
     }
   }
 </script>
 ```
 {% endtab %}
 {% endtabs %}
 
-### Using JSX
+### Scoped tracking
+
+You can scope the tracking to specific state. In this example we only track changes to the properties accessed on the item within the template. Any changes to the items state itself does not affect this component, like adding/removing items.
 
 {% tabs %}
 {% tab title="components/SomeComponent.vue" %}
 ```javascript
+<template>
+  <div @click="actions.onClick">
+    {{ item.title }}
+  </div>
+</template>
 <script>
   import { hooks } from '../overmind'
 
   export default {
+    props: ['id'],
     setup() {
-      const state = hooks.state()
+      const item = hooks.state(state => state.items[this.id])
       const actions = hooks.actions()
 
-      return () => (
-        <div onClick={actions.onClick}>{state.value.foo}</div>
-      )
+      return { item, actions }
     }
   }
 </script>
 ```
 {% endtab %}
 {% endtabs %}
 
+### 
+
 ## Plugin
 
 Vue has a plugin system that allows us to expose Overmind to all components. This allows minimum configuration and you just use state etc. from any component.