pinia-react 1.5.0 → 1.5.1
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 +3 -164
- package/dist/index.d.ts +368 -356
- package/dist/index.js +367 -2232
- package/dist/index.js.map +1 -0
- package/package.json +11 -4
package/README.md
CHANGED
|
@@ -3,172 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
Pinia-react is a state management library for React inspired by Vue's Pinia, bringing a clean, reactive, and TypeScript-friendly state management experience.
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
[](https://github.com/your-username/pinia-react/blob/main/LICENSE)
|
|
6
|
+
# Documentation
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
To learn more about Pinia-React, check [its documentation](https://savagekarl.github.io/pinia-react).
|
|
10
9
|
|
|
11
|
-
The React ecosystem has a variety of state management tools, but they can often be overly complex or lack structure. Inspired by Pinia's modular design and elegant API, pinia-react combines React Hooks with the Pinia philosophy to provide a lightweight, intuitive, and TypeScript-friendly state management solution suitable for modern React applications.
|
|
12
|
-
|
|
13
|
-
## Features
|
|
14
|
-
|
|
15
|
-
- 🔄 **Powerful Reactivity** - Based on the Vue 3 reactivity system, it automatically tracks dependencies and efficiently updates components.
|
|
16
|
-
- ⚡️ **Reactive** - Built on `useSyncExternalStore`, it perfectly adapts to React rendering.
|
|
17
|
-
- 🛠 **Modular** - Independent stores that support dynamic loading.
|
|
18
|
-
- 🔍 **TypeScript Friendly** - Automatic type inference with zero configuration.
|
|
19
|
-
- 🧩 **Plugin System** - Flexible extensions for features like persistence and logging.
|
|
20
|
-
- 🔀 **Familiar API** - The API design is fully inspired by Pinia, making it friendly for Vue developers.
|
|
21
|
-
|
|
22
|
-
## Installation
|
|
23
|
-
|
|
24
|
-
```bash
|
|
25
|
-
pnpm add pinia-react
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Basic Usage
|
|
29
|
-
|
|
30
|
-
### Initialize
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { createPinia } from 'pinia-react';
|
|
34
|
-
const pinia = createPinia();
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### Creating and Using a Store
|
|
38
|
-
|
|
39
|
-
```tsx
|
|
40
|
-
import { defineStore } from 'pinia-react'
|
|
41
|
-
import { useEffect } from 'react'
|
|
42
|
-
|
|
43
|
-
// Define a store (API is identical to Pinia)
|
|
44
|
-
const useCounterStore = defineStore('counter', {
|
|
45
|
-
// Define the initial state
|
|
46
|
-
state: () => ({
|
|
47
|
-
count: 0,
|
|
48
|
-
name: 'Counter'
|
|
49
|
-
}),
|
|
50
|
-
|
|
51
|
-
// Define getter methods (similar to computed properties)
|
|
52
|
-
getters: {
|
|
53
|
-
doubleCount() {
|
|
54
|
-
return this.count * 2
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
|
|
58
|
-
// Define action methods
|
|
59
|
-
actions: {
|
|
60
|
-
increment() {
|
|
61
|
-
this.count++
|
|
62
|
-
},
|
|
63
|
-
|
|
64
|
-
async fetchSomething() {
|
|
65
|
-
// Supports asynchronous operations
|
|
66
|
-
const result = await api.get('/data')
|
|
67
|
-
this.count = result.count
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
// Use in a component
|
|
73
|
-
function Counter() {
|
|
74
|
-
// Get the store instance
|
|
75
|
-
const store = useCounterStore()
|
|
76
|
-
|
|
77
|
-
useEffect(() => {
|
|
78
|
-
// You can call an action method
|
|
79
|
-
store.fetchSomething()
|
|
80
|
-
}, [])
|
|
81
|
-
|
|
82
|
-
return (
|
|
83
|
-
<div>
|
|
84
|
-
<h1>{store.name}: {store.count}</h1>
|
|
85
|
-
<p>Double count: {store.doubleCount}</p>
|
|
86
|
-
<button onClick={() => store.increment()}>Increment</button>
|
|
87
|
-
</div>
|
|
88
|
-
)
|
|
89
|
-
}
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
### Interacting Between Multiple Stores
|
|
93
|
-
|
|
94
|
-
```tsx
|
|
95
|
-
import { defineStore } from 'pinia-react'
|
|
96
|
-
|
|
97
|
-
// User Store
|
|
98
|
-
const useUserStore = defineStore('user', {
|
|
99
|
-
state: () => ({
|
|
100
|
-
name: 'Anonymous',
|
|
101
|
-
isAdmin: false
|
|
102
|
-
}),
|
|
103
|
-
actions: {
|
|
104
|
-
login(name, admin = false) {
|
|
105
|
-
this.name = name
|
|
106
|
-
this.isAdmin = admin
|
|
107
|
-
},
|
|
108
|
-
logout() {
|
|
109
|
-
this.name = 'Anonymous'
|
|
110
|
-
this.isAdmin = false
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
})
|
|
114
|
-
|
|
115
|
-
// Cart Store, which depends on the User Store
|
|
116
|
-
const useCartStore = defineStore('cart', {
|
|
117
|
-
state: () => ({
|
|
118
|
-
items: []
|
|
119
|
-
}),
|
|
120
|
-
getters: {
|
|
121
|
-
isEmpty() {
|
|
122
|
-
return this.items.length === 0
|
|
123
|
-
},
|
|
124
|
-
// Can use other stores
|
|
125
|
-
isCheckoutAllowed() {
|
|
126
|
-
const userStore = useUserStore.$getStore()
|
|
127
|
-
return this.items.length > 0 && userStore.name !== 'Anonymous'
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
actions: {
|
|
131
|
-
addItem(item) {
|
|
132
|
-
this.items.push(item)
|
|
133
|
-
},
|
|
134
|
-
checkout() {
|
|
135
|
-
const userStore = useUserStore.$getStore()
|
|
136
|
-
if (userStore.name === 'Anonymous') {
|
|
137
|
-
throw new Error('Login required')
|
|
138
|
-
}
|
|
139
|
-
// Handle checkout logic...
|
|
140
|
-
this.items = []
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
})
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
### Plugin System
|
|
147
|
-
|
|
148
|
-
Pinia-react supports extending functionality through plugins.
|
|
149
|
-
|
|
150
|
-
```ts
|
|
151
|
-
import { createpinia } from 'pinia-react'
|
|
152
|
-
|
|
153
|
-
// Create a pinia instance
|
|
154
|
-
const pinia = createpinia()
|
|
155
|
-
|
|
156
|
-
// Use a plugin
|
|
157
|
-
pinia.use(myPlugin)
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
// Plugin example
|
|
161
|
-
function myPlugin({ store, options }) {
|
|
162
|
-
// Add custom properties or methods to the store
|
|
163
|
-
return {
|
|
164
|
-
customProperty: 'value',
|
|
165
|
-
customMethod() {
|
|
166
|
-
// Custom logic
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
```
|
|
171
10
|
|
|
172
11
|
## License
|
|
173
12
|
|
|
174
|
-
MIT
|
|
13
|
+
[MIT](https://github.com/savageKarl/pinia-react/blob/main/LICENSE)
|