teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Vue.js + TypeScriptのinjectがexistエラーになるのを解決したい

編集履歴

質問編集履歴

2

vueファイルのタイポを修正しました

2021/09/11 10:06

投稿

dietono
dietono

スコア10

test CHANGED
File without changes
test CHANGED
@@ -222,9 +222,9 @@
222
222
 
223
223
  <template>
224
224
 
225
- <p>{{ user }}</p>
225
+ <p>{{ userState.user.age }}</p>
226
-
226
+
227
- <p>{{ product }}</p>
227
+ <p>{{ productState.product.price }}</p>
228
228
 
229
229
  </template>
230
230
 
@@ -264,9 +264,9 @@
264
264
 
265
265
  return {
266
266
 
267
- user: userState,
267
+ userState,
268
-
268
+
269
- product: productState,
269
+ productState,
270
270
 
271
271
  };
272
272
 

1

stateの構成が間違っていましたので修正しました。

2021/09/11 10:06

投稿

dietono
dietono

スコア10

test CHANGED
File without changes
test CHANGED
@@ -34,41 +34,93 @@
34
34
 
35
35
 
36
36
 
37
- interface user {
37
+ interface userStateType {
38
+
38
-
39
+ user: {
40
+
39
- id: number;
41
+ id: number;
40
-
42
+
41
- name: string;
43
+ name: string;
44
+
45
+ age: number;
46
+
47
+ };
42
48
 
43
49
  }
44
50
 
45
51
 
46
52
 
53
+ export const userState = () => {
54
+
55
+ const state = reactive({
56
+
57
+ user: {
58
+
59
+ id: 1,
60
+
61
+ name: "Taro",
62
+
63
+ age: 18,
64
+
65
+ },
66
+
67
+ }) as userStateType;
68
+
69
+
70
+
71
+ return {
72
+
73
+ state,
74
+
75
+ };
76
+
77
+ };
78
+
79
+
80
+
81
+ ```
82
+
83
+
84
+
85
+ #### store/product.ts
86
+
87
+ ```typescript
88
+
89
+ import { reactive } from "vue";
90
+
91
+
92
+
47
- interface userState {
93
+ interface productStateType {
94
+
48
-
95
+ product: {
96
+
97
+ id: number;
98
+
49
- user: user[];
99
+ name: string;
100
+
101
+ price: number;
102
+
103
+ };
50
104
 
51
105
  }
52
106
 
53
107
 
54
108
 
55
- export const userState = () => {
109
+ export const productState = () => {
56
110
 
57
111
  const state = reactive({
58
112
 
59
- user: [
113
+ product: {
60
-
61
- {
114
+
62
-
63
- id: 1,
115
+ id: 1,
64
-
116
+
65
- name: "Taro",
117
+ name: "car",
118
+
66
-
119
+ price: 1000,
120
+
67
- },
121
+ },
68
-
69
- ],
122
+
70
-
71
- }) as userState;
123
+ }) as productStateType;
72
124
 
73
125
 
74
126
 
@@ -80,136 +132,76 @@
80
132
 
81
133
  };
82
134
 
135
+
136
+
83
- ```
137
+ ```
84
-
85
-
86
-
138
+
139
+
140
+
87
- #### store/product.ts
141
+ #### store/index.ts
142
+
143
+ 上記の `user` と `product` の各stateをまとめます。
88
144
 
89
145
  ```typescript
90
146
 
91
- import { reactive } from "vue";
147
+ import { inject, InjectionKey } from "vue";
148
+
92
-
149
+ import { userState } from "./user";
150
+
93
-
151
+ import { productState } from "./product";
152
+
153
+
154
+
94
-
155
+ export const getStore = () => {
156
+
157
+ return {
158
+
159
+ user: userState(),
160
+
95
- interface product {
161
+ product: productState(),
162
+
96
-
163
+ };
164
+
165
+ };
166
+
167
+
168
+
169
+ export type storeType = ReturnType<typeof getStore>;
170
+
171
+
172
+
173
+ type storesKey = keyof storeType;
174
+
175
+
176
+
177
+ export const storeKey: InjectionKey<storeType> = Symbol("store");
178
+
179
+
180
+
181
+ // keyを引数で受け取って各stateを取得したい
182
+
183
+ export function useStore(storeName: storesKey) {
184
+
97
- id: number;
185
+ const store = inject(storeKey);
98
-
186
+
99
- name: string;
187
+ if (!store) {
100
-
188
+
101
- price: number;
189
+ throw new Error(`Error`);
190
+
191
+ }
192
+
193
+ return store[storeName];
102
194
 
103
195
  }
104
196
 
105
-
106
-
107
- interface productState {
108
-
109
- product: product[];
110
-
111
- }
112
-
113
-
114
-
115
- export const productState = () => {
116
-
117
- const state = reactive({
118
-
119
- product: [
120
-
121
- {
122
-
123
- id: 1,
124
-
125
- name: "car",
126
-
127
- price: 1000,
128
-
129
- },
130
-
131
- ],
132
-
133
- }) as productState;
134
-
135
-
136
-
137
- return {
138
-
139
- state,
140
-
141
- };
142
-
143
- };
144
-
145
- ```
197
+ ```
146
-
147
-
148
-
198
+
199
+
200
+
149
- #### store/index.ts
201
+ #### main.ts
150
-
151
- 上記の `user` と `product` の各stateをまとめます。
152
202
 
153
203
  ```typescript
154
204
 
155
- import { inject, InjectionKey } from "vue";
156
-
157
- import { userState } from "./user";
158
-
159
- import { productState } from "./product";
160
-
161
-
162
-
163
- export const getStore = () => {
164
-
165
- return {
166
-
167
- user: userState(),
168
-
169
- product: productState(),
170
-
171
- };
172
-
173
- };
174
-
175
-
176
-
177
- export type storeType = ReturnType<typeof getStore>;
178
-
179
-
180
-
181
- type storesKey = keyof storeType;
182
-
183
-
184
-
185
- export const storeKey: InjectionKey<storeType> = Symbol("store");
186
-
187
-
188
-
189
- // keyを引数で受け取って各stateを取得したい
190
-
191
- export function useStore(storeName: storesKey) {
192
-
193
- const store = inject(storeKey);
194
-
195
- if (!store) {
196
-
197
- throw new Error(`Error`);
198
-
199
- }
200
-
201
- return store[storeName];
202
-
203
- }
204
-
205
- ```
206
-
207
-
208
-
209
- #### main.ts
210
-
211
- ```typescript
212
-
213
205
  import { createApp } from "vue";
214
206
 
215
207
  import App from "./App.vue";
@@ -264,9 +256,9 @@
264
256
 
265
257
  // Property 'id' does not exist on type 'state'.
266
258
 
267
- console.log(userState.id);
259
+ console.log(userState.user.age);
268
-
260
+
269
- console.log(productState.id);
261
+ console.log(productState.product.price);
270
262
 
271
263
 
272
264