pinia-plugin-subscription 0.0.0-alpha.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 +102 -0
- package/dist/plugin-subscription.js +1525 -0
- package/dist/plugin-subscription.umd.cjs +5 -0
- package/dist/types/index.d.ts +51 -0
- package/dist/types/plugin.d.ts +10 -0
- package/dist/types/store.d.ts +15 -0
- package/package.json +33 -0
package/README.md
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Pinia Plugin Subscription
|
|
2
|
+
|
|
3
|
+
This project is a Pinia plugin for Vue.js designed to enhance the functionality of Pinia stores by providing subscription capabilities. It allows developers to subscribe to store changes and execute custom logic when the store state changes.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Store Subscriptions**: Subscribe to Pinia store changes and execute custom logic.
|
|
8
|
+
- **Debugging Support**: Enable debug mode to log store changes and subscriptions.
|
|
9
|
+
- **Reset Store**: Reset the store to its initial state with custom callbacks.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
To install the plugin, you can use npm or yarn:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install pinia-plugin-subscription
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
or
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn add pinia-plugin-subscription
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
### Basic Usage
|
|
28
|
+
|
|
29
|
+
1. **Import the Plugin**: Import the `createPlugin` function from the plugin.
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { createPlugin } from 'pinia-plugin-subscription';
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
2. **Create a Subscriber**: Create a subscriber object with an `invoke` method that will be called when the store changes.
|
|
36
|
+
|
|
37
|
+
```typescript
|
|
38
|
+
const subscriber = {
|
|
39
|
+
invoke: (context, debug) => {
|
|
40
|
+
console.log('Store changed:', context.store.$state);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
3. **Use the Plugin**: Use the plugin in your Pinia instance.
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { createApp } from 'vue';
|
|
49
|
+
import { createPinia } from 'pinia';
|
|
50
|
+
import App from './App.vue';
|
|
51
|
+
|
|
52
|
+
const app = createApp(App);
|
|
53
|
+
const pinia = createPinia();
|
|
54
|
+
|
|
55
|
+
pinia.use(createPlugin([subscriber]));
|
|
56
|
+
|
|
57
|
+
app.use(pinia);
|
|
58
|
+
app.mount('#app');
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Advanced Usage
|
|
62
|
+
|
|
63
|
+
#### Debug Mode
|
|
64
|
+
|
|
65
|
+
Enable debug mode to log store changes and subscriptions.
|
|
66
|
+
|
|
67
|
+
```typescript
|
|
68
|
+
pinia.use(createPlugin([subscriber], true));
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### Reset Store Callbacks
|
|
72
|
+
|
|
73
|
+
Add custom callbacks to be executed when the store is reset.
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
const subscriber = {
|
|
77
|
+
invoke: (context, debug) => {
|
|
78
|
+
console.log('Store changed:', context.store.$state);
|
|
79
|
+
},
|
|
80
|
+
resetStoreCallback: (store) => {
|
|
81
|
+
console.log('Store reset:', store);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
### `createPlugin(subscribers: PluginSubscriber[], debug?: boolean): PiniaPlugin`
|
|
89
|
+
|
|
90
|
+
Creates a Pinia plugin with the given subscribers and debug mode.
|
|
91
|
+
|
|
92
|
+
- **subscribers**: An array of subscriber objects with an `invoke` method.
|
|
93
|
+
- **debug**: Optional boolean to enable debug mode.
|
|
94
|
+
|
|
95
|
+
### `PluginSubscriber`
|
|
96
|
+
|
|
97
|
+
An interface for subscriber objects.
|
|
98
|
+
|
|
99
|
+
- **invoke**: A method that will be called when the store changes. It receives the Pinia plugin context and debug mode as arguments.
|
|
100
|
+
- **resetStoreCallback**: Optional method that will be called when the store is reset. It receives the store as an argument.
|
|
101
|
+
|
|
102
|
+
|