Skip to content

Commit de2d14e

Browse files
authored
Update 11_usingovermindwithvue: remove duplicate chapters
1 parent 4e0c6f2 commit de2d14e

File tree

1 file changed

+4
-23
lines changed

1 file changed

+4
-23
lines changed

packages/overmind-website/guides/beginner/11_usingovermindwithvue.md

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
There are two approaches to connecting Overmind to Vue.
44

55
```marksy
6-
h(Notice, null, "Please use Vue version **2.6** or later")
6+
h(Notice, null, "Please use Vue version **2.6** or later".)
77
```
88

99
## Plugin
@@ -21,7 +21,7 @@ h(Example, { name: "guide/usingovermindwithvue/connect_plugin_config" })
2121
```
2222

2323
### Rendering
24-
Any state accessed in the component will cause the component to render when a mutation occurs on that state. Overmind actually uses the same approach to change detection as Vue itself. When using the plugin any component can access any state, though the only overhead that is added to the application is an instance of a "tracking tree" per component. This might sound scary, but it is a tiny little object that adds a callback function to Overmind as long as the component lives.These tracking trees are even reused as components unmount.
24+
Any state accessed in the component will cause the component to render when a mutation occurs on that state. Overmind actually uses the same approach to change detection as Vue itself. When using the plugin any component can access any state, though the only overhead that is added to the application is an instance of a "tracking tree" per component. This might sound scary, but it is a tiny little object that adds a callback function to Overmind as long as the component lives. These tracking trees are even reused as components unmount.
2525

2626
### Pass state as props
2727

@@ -41,7 +41,7 @@ h(Example, { name: "guide/usingovermindwithvue/effect" })
4141

4242
## Connect
4343

44-
If you want more manual control of what components connect to Overmind you can rather use the connector.
44+
If you want more manual control of what components connect to Overmind you can use the connector.
4545

4646
```marksy
4747
h(Example, { name: "guide/usingovermindwithvue/connect" })
@@ -56,25 +56,6 @@ h(Example, { name: "guide/usingovermindwithvue/connect_custom" })
5656
You can now access the **admin** state and actions directly with **state** and **actions**.
5757

5858

59-
### Rendering
60-
Any state accessed in the component will cause the component to render when a mutation occurs on that state. Overmind actually uses the same approach to change detection as Vue itself.
61-
62-
### Pass state as props
63-
64-
If you pass a state object or array as a property to a child component you will also in the child component need to **connect**. This ensures that the property you passed is tracked within that component, even though you do not access any state or actions from Overmind. The devtools will help you identify where any components are left "unconnected".
65-
66-
```marksy
67-
h(Example, { name: "guide/usingovermindwithvue/passprops" })
68-
```
69-
70-
### State effects
71-
72-
To run effects in components based on changes to state you use the **addMutationListener** function in the lifecycle hooks of Vue.
73-
74-
```marksy
75-
h(Example, { name: "guide/usingovermindwithvue/effect" })
76-
```
77-
7859
## Computed
7960

8061
Vue has its own observable concept that differs from Overmind. That means you can not use Overmind state inside a computed and expect the computed cache to be busted when the Overmind state changes. But computeds are really for caching expensive computation, which you will not do inside a component using Overmind anyways.
@@ -83,4 +64,4 @@ What you might want is to introduce some logic, maybe combine som data from prop
8364

8465
```marksy
8566
h(Example, { name: "guide/usingovermindwithvue/computed" })
86-
```
67+
```

0 commit comments

Comments
 (0)