mobx-vue-bridge 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,12 +31,13 @@ npm install vue mobx
|
|
|
31
31
|
|
|
32
32
|
## 🚀 Quick Start
|
|
33
33
|
|
|
34
|
+
First, create your MobX presenter:
|
|
35
|
+
|
|
34
36
|
```javascript
|
|
35
|
-
|
|
37
|
+
// presenters/UserPresenter.js
|
|
36
38
|
import { makeAutoObservable } from 'mobx'
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
class UserPresenter {
|
|
40
|
+
export class UserPresenter {
|
|
40
41
|
constructor() {
|
|
41
42
|
this.name = 'John'
|
|
42
43
|
this.age = 25
|
|
@@ -53,10 +54,13 @@ class UserPresenter {
|
|
|
53
54
|
this.emails.push(email)
|
|
54
55
|
}
|
|
55
56
|
}
|
|
57
|
+
```
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
Then use it in your Vue component:
|
|
58
60
|
|
|
59
|
-
|
|
61
|
+
**Option 1: Modern `<script setup>` syntax (recommended)**
|
|
62
|
+
|
|
63
|
+
```vue
|
|
60
64
|
<script setup>
|
|
61
65
|
import { useMobxBridge } from 'mobx-vue-bridge'
|
|
62
66
|
import { UserPresenter } from './presenters/UserPresenter.js'
|
|
@@ -66,8 +70,11 @@ const userPresenter = new UserPresenter()
|
|
|
66
70
|
// Bridge MobX observable to Vue reactive state
|
|
67
71
|
const state = useMobxBridge(userPresenter)
|
|
68
72
|
</script>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**Option 2: Traditional Composition API**
|
|
69
76
|
|
|
70
|
-
|
|
77
|
+
```vue
|
|
71
78
|
<script>
|
|
72
79
|
import { useMobxBridge } from 'mobx-vue-bridge'
|
|
73
80
|
import { UserPresenter } from './presenters/UserPresenter.js'
|
|
@@ -87,7 +94,9 @@ export default {
|
|
|
87
94
|
</script>
|
|
88
95
|
```
|
|
89
96
|
|
|
90
|
-
|
|
97
|
+
**Template usage:**
|
|
98
|
+
|
|
99
|
+
```html
|
|
91
100
|
<template>
|
|
92
101
|
<div>
|
|
93
102
|
<!-- Two-way binding works seamlessly -->
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mobx-vue-bridge",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A bridge between MobX observables and Vue 3 reactivity system, enabling seamless two-way data binding and state synchronization.",
|
|
5
5
|
"main": "src/mobxVueBridge.js",
|
|
6
6
|
"module": "src/mobxVueBridge.js",
|