@deppon/deppon-pinia 2.2.1 → 2.2.3
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/LICENSE +21 -21
- package/README.md +240 -240
- package/es/composable.d.ts +28 -28
- package/es/composable.js +19 -19
- package/es/index.d.ts +25 -25
- package/es/index.js +10 -10
- package/es/vue.d.ts +21 -21
- package/es/vue.js +8 -8
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2022 xingxing
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 xingxing
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,240 +1,240 @@
|
|
|
1
|
-
# `@deppon/deppon-pinia`
|
|
2
|
-
|
|
3
|
-
Pinia 状态管理封装包,提供统一的 Pinia 配置和便捷的使用方式。
|
|
4
|
-
|
|
5
|
-
## 安装
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @deppon/deppon-pinia
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
**依赖说明**:
|
|
12
|
-
|
|
13
|
-
- `pinia` 已声明为 `peerDependencies`,如果宿主项目已安装 `pinia@^2.1.7`,将优先使用宿主项目的版本,避免版本冲突
|
|
14
|
-
- 如果宿主项目未安装 `pinia`,会自动安装(因为也在 `dependencies` 中)
|
|
15
|
-
- 建议宿主项目显式安装 `pinia@^2.1.7` 以确保版本一致性
|
|
16
|
-
|
|
17
|
-
## 特性
|
|
18
|
-
|
|
19
|
-
- 🎯 统一的 Pinia 配置管理
|
|
20
|
-
- 📊 集成状态变更日志追踪(可选)
|
|
21
|
-
- 🔌 支持 Vue 3 Composition API 和 Options API
|
|
22
|
-
- 🎨 提供便捷的 composable 函数
|
|
23
|
-
- 📦 轻量级封装,不改变 Pinia 原有 API
|
|
24
|
-
|
|
25
|
-
## 基础使用
|
|
26
|
-
|
|
27
|
-
### 1. 安装插件
|
|
28
|
-
|
|
29
|
-
在 Vue 应用中安装插件:
|
|
30
|
-
|
|
31
|
-
```javascript
|
|
32
|
-
import { createApp } from 'vue';
|
|
33
|
-
import { default as VuePlugin } from '@deppon/deppon-pinia';
|
|
34
|
-
|
|
35
|
-
const app = createApp(App);
|
|
36
|
-
|
|
37
|
-
// 基础安装
|
|
38
|
-
app.use(VuePlugin);
|
|
39
|
-
|
|
40
|
-
app.mount('#app');
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### 2. 创建 Store
|
|
44
|
-
|
|
45
|
-
```javascript
|
|
46
|
-
// stores/user.js
|
|
47
|
-
// 推荐:从 @deppon/deppon-pinia 导入
|
|
48
|
-
import { defineStore } from '@deppon/deppon-pinia';
|
|
49
|
-
|
|
50
|
-
// 或者从 pinia 导入(也支持)
|
|
51
|
-
// import { defineStore } from 'pinia';
|
|
52
|
-
|
|
53
|
-
export const useUserStore = defineStore('user', {
|
|
54
|
-
state: () => ({
|
|
55
|
-
name: '',
|
|
56
|
-
age: 0,
|
|
57
|
-
}),
|
|
58
|
-
getters: {
|
|
59
|
-
displayName: state => {
|
|
60
|
-
return state.name || '未命名';
|
|
61
|
-
},
|
|
62
|
-
},
|
|
63
|
-
actions: {
|
|
64
|
-
setName(name) {
|
|
65
|
-
this.name = name;
|
|
66
|
-
},
|
|
67
|
-
setAge(age) {
|
|
68
|
-
this.age = age;
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
});
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### 3. 在组件中使用
|
|
75
|
-
|
|
76
|
-
#### Composition API
|
|
77
|
-
|
|
78
|
-
```vue
|
|
79
|
-
<script setup>
|
|
80
|
-
import { useUserStore } from '@/stores/user';
|
|
81
|
-
import { storeToRefs } from '@deppon/deppon-pinia';
|
|
82
|
-
|
|
83
|
-
const userStore = useUserStore();
|
|
84
|
-
const { name, age } = storeToRefs(userStore);
|
|
85
|
-
|
|
86
|
-
const handleUpdate = () => {
|
|
87
|
-
userStore.setName('张三');
|
|
88
|
-
userStore.setAge(25);
|
|
89
|
-
};
|
|
90
|
-
</script>
|
|
91
|
-
|
|
92
|
-
<template>
|
|
93
|
-
<div>
|
|
94
|
-
<p>姓名: {{ name }}</p>
|
|
95
|
-
<p>年龄: {{ age }}</p>
|
|
96
|
-
<button @click="handleUpdate">更新</button>
|
|
97
|
-
</div>
|
|
98
|
-
</template>
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
#### Options API
|
|
102
|
-
|
|
103
|
-
```vue
|
|
104
|
-
<script>
|
|
105
|
-
import { useUserStore } from '@/stores/user';
|
|
106
|
-
|
|
107
|
-
export default {
|
|
108
|
-
computed: {
|
|
109
|
-
...mapState(useUserStore, ['name', 'age']),
|
|
110
|
-
},
|
|
111
|
-
methods: {
|
|
112
|
-
...mapActions(useUserStore, ['setName', 'setAge']),
|
|
113
|
-
handleUpdate() {
|
|
114
|
-
this.setName('张三');
|
|
115
|
-
this.setAge(25);
|
|
116
|
-
},
|
|
117
|
-
},
|
|
118
|
-
};
|
|
119
|
-
</script>
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
## 高级配置
|
|
123
|
-
|
|
124
|
-
### 集成日志追踪
|
|
125
|
-
|
|
126
|
-
如果需要在状态变更时进行埋点追踪,可以传入日志实例:
|
|
127
|
-
|
|
128
|
-
```javascript
|
|
129
|
-
import { createApp } from 'vue';
|
|
130
|
-
import { default as VuePlugin } from '@deppon/deppon-pinia';
|
|
131
|
-
import { useLog } from '@deppon/deppon-log';
|
|
132
|
-
|
|
133
|
-
const app = createApp(App);
|
|
134
|
-
const log = useLog();
|
|
135
|
-
|
|
136
|
-
// 安装插件并配置日志追踪
|
|
137
|
-
app.use(VuePlugin, {
|
|
138
|
-
log: log,
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
app.mount('#app');
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
配置后,每次状态变更都会自动触发日志事件 `pinia_state_change`。
|
|
145
|
-
|
|
146
|
-
### 使用 createDepponPinia 创建自定义实例
|
|
147
|
-
|
|
148
|
-
如果需要更精细的控制,可以直接使用 `createDepponPinia`:
|
|
149
|
-
|
|
150
|
-
```javascript
|
|
151
|
-
import { createApp } from 'vue';
|
|
152
|
-
import { createDepponPinia } from '@deppon/deppon-pinia';
|
|
153
|
-
import { useLog } from '@deppon/deppon-log';
|
|
154
|
-
|
|
155
|
-
const app = createApp(App);
|
|
156
|
-
const log = useLog();
|
|
157
|
-
|
|
158
|
-
const pinia = createDepponPinia({
|
|
159
|
-
log: log,
|
|
160
|
-
beforeCreate: store => {
|
|
161
|
-
console.log('Store 创建前:', store.$id);
|
|
162
|
-
},
|
|
163
|
-
afterCreate: store => {
|
|
164
|
-
console.log('Store 创建后:', store.$id);
|
|
165
|
-
},
|
|
166
|
-
});
|
|
167
|
-
|
|
168
|
-
app.use(pinia);
|
|
169
|
-
app.mount('#app');
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
### 使用 usePinia 获取实例
|
|
173
|
-
|
|
174
|
-
```javascript
|
|
175
|
-
import { usePinia } from '@deppon/deppon-pinia';
|
|
176
|
-
|
|
177
|
-
export default {
|
|
178
|
-
setup() {
|
|
179
|
-
const pinia = usePinia();
|
|
180
|
-
|
|
181
|
-
// 访问所有 stores
|
|
182
|
-
console.log(pinia.state.value);
|
|
183
|
-
|
|
184
|
-
return {};
|
|
185
|
-
},
|
|
186
|
-
};
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
## API
|
|
190
|
-
|
|
191
|
-
### Vue 插件
|
|
192
|
-
|
|
193
|
-
- `VuePlugin` - Vue 插件,用于安装到 Vue 应用
|
|
194
|
-
|
|
195
|
-
### 核心函数
|
|
196
|
-
|
|
197
|
-
- `createDepponPinia(options)` - 创建增强的 Pinia 实例
|
|
198
|
-
- `options.log` - 日志实例(可选)
|
|
199
|
-
- `options.beforeCreate` - Store 创建前的钩子函数(可选)
|
|
200
|
-
- `options.afterCreate` - Store 创建后的钩子函数(可选)
|
|
201
|
-
|
|
202
|
-
### Composition API
|
|
203
|
-
|
|
204
|
-
- `usePinia()` - 获取 Pinia 实例
|
|
205
|
-
- `useStore(store)` - 使用 Store(等同于 Pinia 的 `useStore`)
|
|
206
|
-
- `storeToRefs(store)` - 将 Store 转换为 refs(等同于 Pinia 的 `storeToRefs`)
|
|
207
|
-
|
|
208
|
-
### Options API
|
|
209
|
-
|
|
210
|
-
- `this.$pinia` - 访问 Pinia 实例(需要安装插件)
|
|
211
|
-
|
|
212
|
-
## 持久化存储
|
|
213
|
-
|
|
214
|
-
如果需要持久化存储功能,建议使用 `pinia-plugin-persistedstate`:
|
|
215
|
-
|
|
216
|
-
```bash
|
|
217
|
-
npm install pinia-plugin-persistedstate
|
|
218
|
-
```
|
|
219
|
-
|
|
220
|
-
```javascript
|
|
221
|
-
import { createPinia } from 'pinia';
|
|
222
|
-
import { createPersistedState } from 'pinia-plugin-persistedstate';
|
|
223
|
-
|
|
224
|
-
const pinia = createPinia();
|
|
225
|
-
pinia.use(createPersistedState());
|
|
226
|
-
|
|
227
|
-
app.use(pinia);
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
## 注意事项
|
|
231
|
-
|
|
232
|
-
1. 本包是对 Pinia 的轻量级封装,不会改变 Pinia 的原有 API
|
|
233
|
-
2. 所有 Pinia 的原生功能都可以正常使用
|
|
234
|
-
3. 日志追踪功能是可选的,需要传入日志实例才会生效
|
|
235
|
-
4. 建议在项目入口文件中统一安装插件,确保全局可用
|
|
236
|
-
|
|
237
|
-
## 更多信息
|
|
238
|
-
|
|
239
|
-
- [Pinia 官方文档](https://pinia.vuejs.org/)
|
|
240
|
-
- [Vue 3 文档](https://cn.vuejs.org/)
|
|
1
|
+
# `@deppon/deppon-pinia`
|
|
2
|
+
|
|
3
|
+
Pinia 状态管理封装包,提供统一的 Pinia 配置和便捷的使用方式。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @deppon/deppon-pinia
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**依赖说明**:
|
|
12
|
+
|
|
13
|
+
- `pinia` 已声明为 `peerDependencies`,如果宿主项目已安装 `pinia@^2.1.7`,将优先使用宿主项目的版本,避免版本冲突
|
|
14
|
+
- 如果宿主项目未安装 `pinia`,会自动安装(因为也在 `dependencies` 中)
|
|
15
|
+
- 建议宿主项目显式安装 `pinia@^2.1.7` 以确保版本一致性
|
|
16
|
+
|
|
17
|
+
## 特性
|
|
18
|
+
|
|
19
|
+
- 🎯 统一的 Pinia 配置管理
|
|
20
|
+
- 📊 集成状态变更日志追踪(可选)
|
|
21
|
+
- 🔌 支持 Vue 3 Composition API 和 Options API
|
|
22
|
+
- 🎨 提供便捷的 composable 函数
|
|
23
|
+
- 📦 轻量级封装,不改变 Pinia 原有 API
|
|
24
|
+
|
|
25
|
+
## 基础使用
|
|
26
|
+
|
|
27
|
+
### 1. 安装插件
|
|
28
|
+
|
|
29
|
+
在 Vue 应用中安装插件:
|
|
30
|
+
|
|
31
|
+
```javascript
|
|
32
|
+
import { createApp } from 'vue';
|
|
33
|
+
import { default as VuePlugin } from '@deppon/deppon-pinia';
|
|
34
|
+
|
|
35
|
+
const app = createApp(App);
|
|
36
|
+
|
|
37
|
+
// 基础安装
|
|
38
|
+
app.use(VuePlugin);
|
|
39
|
+
|
|
40
|
+
app.mount('#app');
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 2. 创建 Store
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
// stores/user.js
|
|
47
|
+
// 推荐:从 @deppon/deppon-pinia 导入
|
|
48
|
+
import { defineStore } from '@deppon/deppon-pinia';
|
|
49
|
+
|
|
50
|
+
// 或者从 pinia 导入(也支持)
|
|
51
|
+
// import { defineStore } from 'pinia';
|
|
52
|
+
|
|
53
|
+
export const useUserStore = defineStore('user', {
|
|
54
|
+
state: () => ({
|
|
55
|
+
name: '',
|
|
56
|
+
age: 0,
|
|
57
|
+
}),
|
|
58
|
+
getters: {
|
|
59
|
+
displayName: state => {
|
|
60
|
+
return state.name || '未命名';
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
actions: {
|
|
64
|
+
setName(name) {
|
|
65
|
+
this.name = name;
|
|
66
|
+
},
|
|
67
|
+
setAge(age) {
|
|
68
|
+
this.age = age;
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
});
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 3. 在组件中使用
|
|
75
|
+
|
|
76
|
+
#### Composition API
|
|
77
|
+
|
|
78
|
+
```vue
|
|
79
|
+
<script setup>
|
|
80
|
+
import { useUserStore } from '@/stores/user';
|
|
81
|
+
import { storeToRefs } from '@deppon/deppon-pinia';
|
|
82
|
+
|
|
83
|
+
const userStore = useUserStore();
|
|
84
|
+
const { name, age } = storeToRefs(userStore);
|
|
85
|
+
|
|
86
|
+
const handleUpdate = () => {
|
|
87
|
+
userStore.setName('张三');
|
|
88
|
+
userStore.setAge(25);
|
|
89
|
+
};
|
|
90
|
+
</script>
|
|
91
|
+
|
|
92
|
+
<template>
|
|
93
|
+
<div>
|
|
94
|
+
<p>姓名: {{ name }}</p>
|
|
95
|
+
<p>年龄: {{ age }}</p>
|
|
96
|
+
<button @click="handleUpdate">更新</button>
|
|
97
|
+
</div>
|
|
98
|
+
</template>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
#### Options API
|
|
102
|
+
|
|
103
|
+
```vue
|
|
104
|
+
<script>
|
|
105
|
+
import { useUserStore } from '@/stores/user';
|
|
106
|
+
|
|
107
|
+
export default {
|
|
108
|
+
computed: {
|
|
109
|
+
...mapState(useUserStore, ['name', 'age']),
|
|
110
|
+
},
|
|
111
|
+
methods: {
|
|
112
|
+
...mapActions(useUserStore, ['setName', 'setAge']),
|
|
113
|
+
handleUpdate() {
|
|
114
|
+
this.setName('张三');
|
|
115
|
+
this.setAge(25);
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
};
|
|
119
|
+
</script>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## 高级配置
|
|
123
|
+
|
|
124
|
+
### 集成日志追踪
|
|
125
|
+
|
|
126
|
+
如果需要在状态变更时进行埋点追踪,可以传入日志实例:
|
|
127
|
+
|
|
128
|
+
```javascript
|
|
129
|
+
import { createApp } from 'vue';
|
|
130
|
+
import { default as VuePlugin } from '@deppon/deppon-pinia';
|
|
131
|
+
import { useLog } from '@deppon/deppon-log';
|
|
132
|
+
|
|
133
|
+
const app = createApp(App);
|
|
134
|
+
const log = useLog();
|
|
135
|
+
|
|
136
|
+
// 安装插件并配置日志追踪
|
|
137
|
+
app.use(VuePlugin, {
|
|
138
|
+
log: log,
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
app.mount('#app');
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
配置后,每次状态变更都会自动触发日志事件 `pinia_state_change`。
|
|
145
|
+
|
|
146
|
+
### 使用 createDepponPinia 创建自定义实例
|
|
147
|
+
|
|
148
|
+
如果需要更精细的控制,可以直接使用 `createDepponPinia`:
|
|
149
|
+
|
|
150
|
+
```javascript
|
|
151
|
+
import { createApp } from 'vue';
|
|
152
|
+
import { createDepponPinia } from '@deppon/deppon-pinia';
|
|
153
|
+
import { useLog } from '@deppon/deppon-log';
|
|
154
|
+
|
|
155
|
+
const app = createApp(App);
|
|
156
|
+
const log = useLog();
|
|
157
|
+
|
|
158
|
+
const pinia = createDepponPinia({
|
|
159
|
+
log: log,
|
|
160
|
+
beforeCreate: store => {
|
|
161
|
+
console.log('Store 创建前:', store.$id);
|
|
162
|
+
},
|
|
163
|
+
afterCreate: store => {
|
|
164
|
+
console.log('Store 创建后:', store.$id);
|
|
165
|
+
},
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
app.use(pinia);
|
|
169
|
+
app.mount('#app');
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### 使用 usePinia 获取实例
|
|
173
|
+
|
|
174
|
+
```javascript
|
|
175
|
+
import { usePinia } from '@deppon/deppon-pinia';
|
|
176
|
+
|
|
177
|
+
export default {
|
|
178
|
+
setup() {
|
|
179
|
+
const pinia = usePinia();
|
|
180
|
+
|
|
181
|
+
// 访问所有 stores
|
|
182
|
+
console.log(pinia.state.value);
|
|
183
|
+
|
|
184
|
+
return {};
|
|
185
|
+
},
|
|
186
|
+
};
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## API
|
|
190
|
+
|
|
191
|
+
### Vue 插件
|
|
192
|
+
|
|
193
|
+
- `VuePlugin` - Vue 插件,用于安装到 Vue 应用
|
|
194
|
+
|
|
195
|
+
### 核心函数
|
|
196
|
+
|
|
197
|
+
- `createDepponPinia(options)` - 创建增强的 Pinia 实例
|
|
198
|
+
- `options.log` - 日志实例(可选)
|
|
199
|
+
- `options.beforeCreate` - Store 创建前的钩子函数(可选)
|
|
200
|
+
- `options.afterCreate` - Store 创建后的钩子函数(可选)
|
|
201
|
+
|
|
202
|
+
### Composition API
|
|
203
|
+
|
|
204
|
+
- `usePinia()` - 获取 Pinia 实例
|
|
205
|
+
- `useStore(store)` - 使用 Store(等同于 Pinia 的 `useStore`)
|
|
206
|
+
- `storeToRefs(store)` - 将 Store 转换为 refs(等同于 Pinia 的 `storeToRefs`)
|
|
207
|
+
|
|
208
|
+
### Options API
|
|
209
|
+
|
|
210
|
+
- `this.$pinia` - 访问 Pinia 实例(需要安装插件)
|
|
211
|
+
|
|
212
|
+
## 持久化存储
|
|
213
|
+
|
|
214
|
+
如果需要持久化存储功能,建议使用 `pinia-plugin-persistedstate`:
|
|
215
|
+
|
|
216
|
+
```bash
|
|
217
|
+
npm install pinia-plugin-persistedstate
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
```javascript
|
|
221
|
+
import { createPinia } from 'pinia';
|
|
222
|
+
import { createPersistedState } from 'pinia-plugin-persistedstate';
|
|
223
|
+
|
|
224
|
+
const pinia = createPinia();
|
|
225
|
+
pinia.use(createPersistedState());
|
|
226
|
+
|
|
227
|
+
app.use(pinia);
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
## 注意事项
|
|
231
|
+
|
|
232
|
+
1. 本包是对 Pinia 的轻量级封装,不会改变 Pinia 的原有 API
|
|
233
|
+
2. 所有 Pinia 的原生功能都可以正常使用
|
|
234
|
+
3. 日志追踪功能是可选的,需要传入日志实例才会生效
|
|
235
|
+
4. 建议在项目入口文件中统一安装插件,确保全局可用
|
|
236
|
+
|
|
237
|
+
## 更多信息
|
|
238
|
+
|
|
239
|
+
- [Pinia 官方文档](https://pinia.vuejs.org/)
|
|
240
|
+
- [Vue 3 文档](https://cn.vuejs.org/)
|
package/es/composable.d.ts
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Composition API: usePinia
|
|
3
|
-
* 在 Vue 3 Composition API 中获取 Pinia 实例
|
|
4
|
-
*
|
|
5
|
-
* @example
|
|
6
|
-
* import { usePinia } from '@deppon/deppon-pinia/vue'
|
|
7
|
-
*
|
|
8
|
-
* export default {
|
|
9
|
-
* setup() {
|
|
10
|
-
* const pinia = usePinia()
|
|
11
|
-
* // 使用 pinia
|
|
12
|
-
* }
|
|
13
|
-
* }
|
|
14
|
-
*/
|
|
15
|
-
export function usePinia(): import("pinia").Pinia | null;
|
|
16
|
-
/**
|
|
17
|
-
* 增强的 useStore,支持自动获取 Pinia 实例
|
|
18
|
-
* @param {string|Function} store - Store ID 或 Store 定义函数
|
|
19
|
-
* @returns {Object} Store 实例
|
|
20
|
-
*/
|
|
21
|
-
export function useStore(store: string | Function): Object;
|
|
22
|
-
/**
|
|
23
|
-
* 导出 storeToRefs 以便使用
|
|
24
|
-
*/
|
|
25
|
-
export function storeToRefs(store: any): ({} | import("vue").ToRefs<any>) & import("vue").ToRefs<import("pinia").PiniaCustomStateProperties<any>> & ({} | {} | {
|
|
26
|
-
[x: string]: import("vue").WritableComputedRef<any, any>;
|
|
27
|
-
[x: number]: import("vue").WritableComputedRef<any, any>;
|
|
28
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* Composition API: usePinia
|
|
3
|
+
* 在 Vue 3 Composition API 中获取 Pinia 实例
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* import { usePinia } from '@deppon/deppon-pinia/vue'
|
|
7
|
+
*
|
|
8
|
+
* export default {
|
|
9
|
+
* setup() {
|
|
10
|
+
* const pinia = usePinia()
|
|
11
|
+
* // 使用 pinia
|
|
12
|
+
* }
|
|
13
|
+
* }
|
|
14
|
+
*/
|
|
15
|
+
export function usePinia(): import("pinia").Pinia | null;
|
|
16
|
+
/**
|
|
17
|
+
* 增强的 useStore,支持自动获取 Pinia 实例
|
|
18
|
+
* @param {string|Function} store - Store ID 或 Store 定义函数
|
|
19
|
+
* @returns {Object} Store 实例
|
|
20
|
+
*/
|
|
21
|
+
export function useStore(store: string | Function): Object;
|
|
22
|
+
/**
|
|
23
|
+
* 导出 storeToRefs 以便使用
|
|
24
|
+
*/
|
|
25
|
+
export function storeToRefs(store: any): ({} | import("vue").ToRefs<any>) & import("vue").ToRefs<import("pinia").PiniaCustomStateProperties<any>> & ({} | {} | {
|
|
26
|
+
[x: string]: import("vue").WritableComputedRef<any, any>;
|
|
27
|
+
[x: number]: import("vue").WritableComputedRef<any, any>;
|
|
28
|
+
});
|
package/es/composable.js
CHANGED
|
@@ -2,19 +2,19 @@ import './_virtual/_rollup-plugin-inject-process-env.js';
|
|
|
2
2
|
import { inject, getCurrentInstance } from 'vue';
|
|
3
3
|
import { storeToRefs as storeToRefs$1 } from 'pinia';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Composition API: usePinia
|
|
7
|
-
* 在 Vue 3 Composition API 中获取 Pinia 实例
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* import { usePinia } from '@deppon/deppon-pinia/vue'
|
|
11
|
-
*
|
|
12
|
-
* export default {
|
|
13
|
-
* setup() {
|
|
14
|
-
* const pinia = usePinia()
|
|
15
|
-
* // 使用 pinia
|
|
16
|
-
* }
|
|
17
|
-
* }
|
|
5
|
+
/**
|
|
6
|
+
* Composition API: usePinia
|
|
7
|
+
* 在 Vue 3 Composition API 中获取 Pinia 实例
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* import { usePinia } from '@deppon/deppon-pinia/vue'
|
|
11
|
+
*
|
|
12
|
+
* export default {
|
|
13
|
+
* setup() {
|
|
14
|
+
* const pinia = usePinia()
|
|
15
|
+
* // 使用 pinia
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
18
|
*/
|
|
19
19
|
function usePinia() {
|
|
20
20
|
// 优先从 provide 获取
|
|
@@ -35,18 +35,18 @@ function usePinia() {
|
|
|
35
35
|
return piniaFromProvide;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
/**
|
|
39
|
-
* 增强的 useStore,支持自动获取 Pinia 实例
|
|
40
|
-
* @param {string|Function} store - Store ID 或 Store 定义函数
|
|
41
|
-
* @returns {Object} Store 实例
|
|
38
|
+
/**
|
|
39
|
+
* 增强的 useStore,支持自动获取 Pinia 实例
|
|
40
|
+
* @param {string|Function} store - Store ID 或 Store 定义函数
|
|
41
|
+
* @returns {Object} Store 实例
|
|
42
42
|
*/
|
|
43
43
|
function useStore(store) {
|
|
44
44
|
// 在 Pinia 2.x 中,直接使用 store 定义函数
|
|
45
45
|
return typeof store === 'function' ? store() : store;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
/**
|
|
49
|
-
* 导出 storeToRefs 以便使用
|
|
48
|
+
/**
|
|
49
|
+
* 导出 storeToRefs 以便使用
|
|
50
50
|
*/
|
|
51
51
|
function storeToRefs(store) {
|
|
52
52
|
return storeToRefs$1(store);
|
package/es/index.d.ts
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 创建增强的 Pinia 实例
|
|
3
|
-
* @param {Object} options - 配置选项
|
|
4
|
-
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
5
|
-
* @param {Object} options.persist - 持久化配置(可选)
|
|
6
|
-
* @param {Object} options.persist.storage - 存储方式,默认为 localStorage
|
|
7
|
-
* @param {Array} options.persist.stores - 需要持久化的 store ID 列表
|
|
8
|
-
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
9
|
-
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
10
|
-
* @returns {Object} Pinia 实例
|
|
11
|
-
*/
|
|
12
|
-
export function createDepponPinia(options?: {
|
|
13
|
-
log: Object;
|
|
14
|
-
persist: {
|
|
15
|
-
storage: Object;
|
|
16
|
-
stores: any[];
|
|
17
|
-
};
|
|
18
|
-
beforeCreate: Function;
|
|
19
|
-
afterCreate: Function;
|
|
20
|
-
}): Object;
|
|
21
|
-
export default createDepponPinia;
|
|
22
|
-
export { defineStore };
|
|
23
|
-
export { default as VuePlugin } from "./vue.js";
|
|
24
|
-
import { defineStore } from "pinia";
|
|
25
|
-
export { usePinia, useStore, storeToRefs } from "./composable.js";
|
|
1
|
+
/**
|
|
2
|
+
* 创建增强的 Pinia 实例
|
|
3
|
+
* @param {Object} options - 配置选项
|
|
4
|
+
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
5
|
+
* @param {Object} options.persist - 持久化配置(可选)
|
|
6
|
+
* @param {Object} options.persist.storage - 存储方式,默认为 localStorage
|
|
7
|
+
* @param {Array} options.persist.stores - 需要持久化的 store ID 列表
|
|
8
|
+
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
9
|
+
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
10
|
+
* @returns {Object} Pinia 实例
|
|
11
|
+
*/
|
|
12
|
+
export function createDepponPinia(options?: {
|
|
13
|
+
log: Object;
|
|
14
|
+
persist: {
|
|
15
|
+
storage: Object;
|
|
16
|
+
stores: any[];
|
|
17
|
+
};
|
|
18
|
+
beforeCreate: Function;
|
|
19
|
+
afterCreate: Function;
|
|
20
|
+
}): Object;
|
|
21
|
+
export default createDepponPinia;
|
|
22
|
+
export { defineStore };
|
|
23
|
+
export { default as VuePlugin } from "./vue.js";
|
|
24
|
+
import { defineStore } from "pinia";
|
|
25
|
+
export { usePinia, useStore, storeToRefs } from "./composable.js";
|
package/es/index.js
CHANGED
|
@@ -4,16 +4,16 @@ export { defineStore } from 'pinia';
|
|
|
4
4
|
export { default as VuePlugin } from './vue.js';
|
|
5
5
|
export { storeToRefs, usePinia, useStore } from './composable.js';
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* 创建增强的 Pinia 实例
|
|
9
|
-
* @param {Object} options - 配置选项
|
|
10
|
-
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
11
|
-
* @param {Object} options.persist - 持久化配置(可选)
|
|
12
|
-
* @param {Object} options.persist.storage - 存储方式,默认为 localStorage
|
|
13
|
-
* @param {Array} options.persist.stores - 需要持久化的 store ID 列表
|
|
14
|
-
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
15
|
-
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
16
|
-
* @returns {Object} Pinia 实例
|
|
7
|
+
/**
|
|
8
|
+
* 创建增强的 Pinia 实例
|
|
9
|
+
* @param {Object} options - 配置选项
|
|
10
|
+
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
11
|
+
* @param {Object} options.persist - 持久化配置(可选)
|
|
12
|
+
* @param {Object} options.persist.storage - 存储方式,默认为 localStorage
|
|
13
|
+
* @param {Array} options.persist.stores - 需要持久化的 store ID 列表
|
|
14
|
+
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
15
|
+
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
16
|
+
* @returns {Object} Pinia 实例
|
|
17
17
|
*/
|
|
18
18
|
function createDepponPinia() {
|
|
19
19
|
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
package/es/vue.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
declare namespace _default {
|
|
2
|
-
export { install };
|
|
3
|
-
}
|
|
4
|
-
export default _default;
|
|
5
|
-
export { createDepponPinia } from "./index.js";
|
|
6
|
-
/**
|
|
7
|
-
* Vue 插件安装函数
|
|
8
|
-
* @param {Object} app - Vue 应用实例
|
|
9
|
-
* @param {Object} options - 配置选项
|
|
10
|
-
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
11
|
-
* @param {Object} options.persist - 持久化配置(可选)
|
|
12
|
-
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
13
|
-
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
14
|
-
*/
|
|
15
|
-
declare function install(app: Object, options?: {
|
|
16
|
-
log: Object;
|
|
17
|
-
persist: Object;
|
|
18
|
-
beforeCreate: Function;
|
|
19
|
-
afterCreate: Function;
|
|
20
|
-
}): void;
|
|
21
|
-
export { usePinia, useStore, storeToRefs } from "./composable.js";
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
export { install };
|
|
3
|
+
}
|
|
4
|
+
export default _default;
|
|
5
|
+
export { createDepponPinia } from "./index.js";
|
|
6
|
+
/**
|
|
7
|
+
* Vue 插件安装函数
|
|
8
|
+
* @param {Object} app - Vue 应用实例
|
|
9
|
+
* @param {Object} options - 配置选项
|
|
10
|
+
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
11
|
+
* @param {Object} options.persist - 持久化配置(可选)
|
|
12
|
+
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
13
|
+
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
14
|
+
*/
|
|
15
|
+
declare function install(app: Object, options?: {
|
|
16
|
+
log: Object;
|
|
17
|
+
persist: Object;
|
|
18
|
+
beforeCreate: Function;
|
|
19
|
+
afterCreate: Function;
|
|
20
|
+
}): void;
|
|
21
|
+
export { usePinia, useStore, storeToRefs } from "./composable.js";
|
package/es/vue.js
CHANGED
|
@@ -2,14 +2,14 @@ import './_virtual/_rollup-plugin-inject-process-env.js';
|
|
|
2
2
|
import { createDepponPinia } from './index.js';
|
|
3
3
|
export { createDepponPinia } from './index.js';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* Vue 插件安装函数
|
|
7
|
-
* @param {Object} app - Vue 应用实例
|
|
8
|
-
* @param {Object} options - 配置选项
|
|
9
|
-
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
10
|
-
* @param {Object} options.persist - 持久化配置(可选)
|
|
11
|
-
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
12
|
-
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
5
|
+
/**
|
|
6
|
+
* Vue 插件安装函数
|
|
7
|
+
* @param {Object} app - Vue 应用实例
|
|
8
|
+
* @param {Object} options - 配置选项
|
|
9
|
+
* @param {Object} options.log - 日志实例(可选,用于状态变更追踪)
|
|
10
|
+
* @param {Object} options.persist - 持久化配置(可选)
|
|
11
|
+
* @param {Function} options.beforeCreate - Store 创建前的钩子函数
|
|
12
|
+
* @param {Function} options.afterCreate - Store 创建后的钩子函数
|
|
13
13
|
*/
|
|
14
14
|
function install(app) {
|
|
15
15
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|