teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問【Nuxt.js】【Vue.js】【Vuex】watchでstore内の値が変更された際に検知する方法

編集履歴

質問編集履歴

5

fdsf

2018/12/21 04:44

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
File without changes
test CHANGED
@@ -356,6 +356,142 @@
356
356
 
357
357
 
358
358
 
359
+ `change.vue`
360
+
361
+ ```
362
+
363
+ <template>
364
+
365
+ <div>
366
+
367
+ <div v-for="size in creative_data.sizes">
368
+
369
+ <el-button class="size" :style="{
370
+
371
+ width: size.width / 3 + 'px',
372
+
373
+ height: size.height / 3 + 'px',
374
+
375
+ }"
376
+
377
+ @click="$store.dispatch('creative/writeSize', size)"
378
+
379
+ >
380
+
381
+ {{ size.width }}×{{ size.height }}
382
+
383
+ </el-button>
384
+
385
+ </div>
386
+
387
+ </div>
388
+
389
+ </template>
390
+
391
+
392
+
393
+ <script>
394
+
395
+ export default {
396
+
397
+ props: {
398
+
399
+ },
400
+
401
+ data() {
402
+
403
+ return {
404
+
405
+ radius: 3,
406
+
407
+ }
408
+
409
+ },
410
+
411
+ computed: {},
412
+
413
+ components: {},
414
+
415
+ data() {
416
+
417
+ return {
418
+
419
+ creative_data: {
420
+
421
+ sizes: [
422
+
423
+ {
424
+
425
+ width: '300',
426
+
427
+ height: '400',
428
+
429
+ },
430
+
431
+ {
432
+
433
+ width: '300',
434
+
435
+ height: '100',
436
+
437
+ },
438
+
439
+ {
440
+
441
+ width: '400',
442
+
443
+ height: '500',
444
+
445
+ },
446
+
447
+ {
448
+
449
+ width: '200',
450
+
451
+ height: '200',
452
+
453
+ },
454
+
455
+ {
456
+
457
+ width: '100',
458
+
459
+ height: '500',
460
+
461
+ },
462
+
463
+ ],
464
+
465
+ },
466
+
467
+ }
468
+
469
+ },
470
+
471
+ mounted: function() {},
472
+
473
+ methods: {
474
+
475
+ },
476
+
477
+ }
478
+
479
+ </script>
480
+
481
+
482
+
483
+ <style scoped lang="scss">
484
+
485
+ @import '../../../../assets/css/creative/size.css';
486
+
487
+ </style>
488
+
489
+
490
+
491
+ ```
492
+
493
+
494
+
359
495
  ![イメージ説明](10e7ae5de48606a5fe7ee56c3cca6c55.png)
360
496
 
361
497
 

4

ger

2018/12/21 04:44

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
File without changes
test CHANGED
@@ -18,15 +18,33 @@
18
18
 
19
19
  export const state = () => ({
20
20
 
21
- template: {
21
+ template: {
22
-
22
+
23
- id: '',
23
+ id: 2,
24
-
24
+
25
- width: 0,
25
+ width: 200,
26
-
26
+
27
- height: 0,
27
+ height: 200,
28
-
28
+
29
- layers: [],
29
+ layers: [
30
+
31
+ { type: 'logo', width: 50, height: 50, x_position: 10, y_position: 5, z_index: 1 },
32
+
33
+ { type: 'image', width: 20, height: 20, x_position: 10, y_position: 100, z_index: 0 },
34
+
35
+ { type: 'image', width: 60, height: 30, x_position: 10, y_position: 150, z_index: 2 },
36
+
37
+ ],
38
+
39
+ },
40
+
41
+ colors: {
42
+
43
+ logo: '#FF0000',
44
+
45
+ text: '#00FF00',
46
+
47
+ image: '#0000FF',
30
48
 
31
49
  },
32
50
 
@@ -34,6 +52,112 @@
34
52
 
35
53
  })
36
54
 
55
+
56
+
57
+ export const mutations = {
58
+
59
+ setTemplate(state, template) {
60
+
61
+ state.template.id = template.id
62
+
63
+ state.template.width = template.width
64
+
65
+ state.template.height = template.height
66
+
67
+ state.template.layers = template.layers
68
+
69
+ },
70
+
71
+ setSize(state, size) {
72
+
73
+ state.template.width = size.width
74
+
75
+ state.template.height = size.height
76
+
77
+ if (state.template.layers) {
78
+
79
+ state.template.layers = []
80
+
81
+ }
82
+
83
+ },
84
+
85
+ setTypeColor(state, type) {
86
+
87
+ switch (type) {
88
+
89
+ case 'logo':
90
+
91
+ return state.colors.logo
92
+
93
+ break
94
+
95
+ case 'text':
96
+
97
+ return state.colors.text
98
+
99
+ break
100
+
101
+ case 'image':
102
+
103
+ return state.colors.image
104
+
105
+ break
106
+
107
+ }
108
+
109
+ },
110
+
111
+ setFlag(state, flag) {
112
+
113
+ state.list_flag = flag
114
+
115
+ }
116
+
117
+ }
118
+
119
+
120
+
121
+ export const actions = {
122
+
123
+ writeTemplate(context, template) {
124
+
125
+ context.commit('setTemplate', template)
126
+
127
+ },
128
+
129
+
130
+
131
+ writeSize(context, size) {
132
+
133
+ context.commit('setSize', size)
134
+
135
+ },
136
+
137
+
138
+
139
+ changeTypeColor(context, type) {
140
+
141
+ context.commit('setTypeColor', '#00FF00')
142
+
143
+ },
144
+
145
+
146
+
147
+ changeFlag(context, flag) {
148
+
149
+ context.commit('setFlag', flag)
150
+
151
+ },
152
+
153
+ }
154
+
155
+
156
+
157
+ export const getters = {}
158
+
159
+
160
+
37
161
  ```
38
162
 
39
163
  #現在のコード

3

への句

2018/12/21 04:21

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
File without changes
test CHANGED
@@ -229,3 +229,17 @@
229
229
  </script>
230
230
 
231
231
  ```
232
+
233
+
234
+
235
+ ![イメージ説明](10e7ae5de48606a5fe7ee56c3cca6c55.png)
236
+
237
+
238
+
239
+ 稚拙な画像なのですが、現在の自分のデータ間構成についてです。
240
+
241
+ shou6さんが貼ってくださった通りのコードだと**watch**呼び出しに成功しているのですが、自分のコードの場合**watch**呼び出しできませんでした。
242
+
243
+ 説明すると、「**change.vue**」で**store**の**state**内データの**template**の値を変更しています。**watch**処理を行っていない別ファイルで。（変更処理は**store**の**actions**等を使って**commit**しています）
244
+
245
+ 憶測なのですが、自身のファイル内で変更の行われない値は監視されないのでしょうか？

2

fsdfd

2018/12/21 04:02

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,34 @@
8
8
 
9
9
 
10
10
 
11
+
12
+
13
+ #`store`側のコード
14
+
15
+ `creative.js`
16
+
17
+ ```
18
+
19
+ export const state = () => ({
20
+
21
+ template: {
22
+
23
+ id: '',
24
+
25
+ width: 0,
26
+
27
+ height: 0,
28
+
29
+ layers: [],
30
+
31
+ },
32
+
33
+ list_flag: '',
34
+
35
+ })
36
+
37
+ ```
38
+
11
39
  #現在のコード
12
40
 
13
41
  一部抜粋
@@ -44,34 +72,6 @@
44
72
 
45
73
  ```
46
74
 
47
- #`store`側のコード
48
-
49
- `creative.js`
50
-
51
- ```
52
-
53
- export const state = () => ({
54
-
55
- template: {
56
-
57
- id: '',
58
-
59
- width: 0,
60
-
61
- height: 0,
62
-
63
- layers: [],
64
-
65
- },
66
-
67
- list_flag: '',
68
-
69
- })
70
-
71
- ```
72
-
73
-
74
-
75
75
  #.vueの全体コード
76
76
 
77
77
  `preview.vue`

1

henko

2018/12/20 08:43

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
@@ -1 +1 @@
1
- 【Nuxt.js】【Vue.js】watchでstore内の値が変更された際に検知する方法
1
+ 【Nuxt.js】【Vue.js】【Vuex】watchでstore内の値が変更された際に検知する方法
test CHANGED
File without changes