teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

fdsf

2018/12/21 04:44

投稿

tokuwgawa
tokuwgawa

スコア45

title CHANGED
File without changes
body CHANGED
@@ -177,6 +177,74 @@
177
177
  </script>
178
178
  ```
179
179
 
180
+ `change.vue`
181
+ ```
182
+ <template>
183
+ <div>
184
+ <div v-for="size in creative_data.sizes">
185
+ <el-button class="size" :style="{
186
+ width: size.width / 3 + 'px',
187
+ height: size.height / 3 + 'px',
188
+ }"
189
+ @click="$store.dispatch('creative/writeSize', size)"
190
+ >
191
+ {{ size.width }}×{{ size.height }}
192
+ </el-button>
193
+ </div>
194
+ </div>
195
+ </template>
196
+
197
+ <script>
198
+ export default {
199
+ props: {
200
+ },
201
+ data() {
202
+ return {
203
+ radius: 3,
204
+ }
205
+ },
206
+ computed: {},
207
+ components: {},
208
+ data() {
209
+ return {
210
+ creative_data: {
211
+ sizes: [
212
+ {
213
+ width: '300',
214
+ height: '400',
215
+ },
216
+ {
217
+ width: '300',
218
+ height: '100',
219
+ },
220
+ {
221
+ width: '400',
222
+ height: '500',
223
+ },
224
+ {
225
+ width: '200',
226
+ height: '200',
227
+ },
228
+ {
229
+ width: '100',
230
+ height: '500',
231
+ },
232
+ ],
233
+ },
234
+ }
235
+ },
236
+ mounted: function() {},
237
+ methods: {
238
+ },
239
+ }
240
+ </script>
241
+
242
+ <style scoped lang="scss">
243
+ @import '../../../../assets/css/creative/size.css';
244
+ </style>
245
+
246
+ ```
247
+
180
248
  ![イメージ説明](10e7ae5de48606a5fe7ee56c3cca6c55.png)
181
249
 
182
250
  稚拙な画像なのですが、現在の自分のデータ間構成についてです。

4

ger

2018/12/21 04:44

投稿

tokuwgawa
tokuwgawa

スコア45

title CHANGED
File without changes
body CHANGED
@@ -8,14 +8,76 @@
8
8
  `creative.js`
9
9
  ```
10
10
  export const state = () => ({
11
- template: {
11
+ template: {
12
- id: '',
12
+ id: 2,
13
- width: 0,
13
+ width: 200,
14
- height: 0,
14
+ height: 200,
15
- layers: [],
15
+ layers: [
16
+ { type: 'logo', width: 50, height: 50, x_position: 10, y_position: 5, z_index: 1 },
17
+ { type: 'image', width: 20, height: 20, x_position: 10, y_position: 100, z_index: 0 },
18
+ { type: 'image', width: 60, height: 30, x_position: 10, y_position: 150, z_index: 2 },
19
+ ],
20
+ },
21
+ colors: {
22
+ logo: '#FF0000',
23
+ text: '#00FF00',
24
+ image: '#0000FF',
16
25
  },
17
26
  list_flag: '',
18
27
  })
28
+
29
+ export const mutations = {
30
+ setTemplate(state, template) {
31
+ state.template.id = template.id
32
+ state.template.width = template.width
33
+ state.template.height = template.height
34
+ state.template.layers = template.layers
35
+ },
36
+ setSize(state, size) {
37
+ state.template.width = size.width
38
+ state.template.height = size.height
39
+ if (state.template.layers) {
40
+ state.template.layers = []
41
+ }
42
+ },
43
+ setTypeColor(state, type) {
44
+ switch (type) {
45
+ case 'logo':
46
+ return state.colors.logo
47
+ break
48
+ case 'text':
49
+ return state.colors.text
50
+ break
51
+ case 'image':
52
+ return state.colors.image
53
+ break
54
+ }
55
+ },
56
+ setFlag(state, flag) {
57
+ state.list_flag = flag
58
+ }
59
+ }
60
+
61
+ export const actions = {
62
+ writeTemplate(context, template) {
63
+ context.commit('setTemplate', template)
64
+ },
65
+
66
+ writeSize(context, size) {
67
+ context.commit('setSize', size)
68
+ },
69
+
70
+ changeTypeColor(context, type) {
71
+ context.commit('setTypeColor', '#00FF00')
72
+ },
73
+
74
+ changeFlag(context, flag) {
75
+ context.commit('setFlag', flag)
76
+ },
77
+ }
78
+
79
+ export const getters = {}
80
+
19
81
  ```
20
82
  #現在のコード
21
83
  一部抜粋

3

への句

2018/12/21 04:21

投稿

tokuwgawa
tokuwgawa

スコア45

title CHANGED
File without changes
body CHANGED
@@ -113,4 +113,11 @@
113
113
  },
114
114
  }
115
115
  </script>
116
- ```
116
+ ```
117
+
118
+ ![イメージ説明](10e7ae5de48606a5fe7ee56c3cca6c55.png)
119
+
120
+ 稚拙な画像なのですが、現在の自分のデータ間構成についてです。
121
+ shou6さんが貼ってくださった通りのコードだと**watch**呼び出しに成功しているのですが、自分のコードの場合**watch**呼び出しできませんでした。
122
+ 説明すると、「**change.vue**」で**store**の**state**内データの**template**の値を変更しています。**watch**処理を行っていない別ファイルで。(変更処理は**store**の**actions**等を使って**commit**しています)
123
+ 憶測なのですが、自身のファイル内で変更の行われない値は監視されないのでしょうか?

2

fsdfd

2018/12/21 04:02

投稿

tokuwgawa
tokuwgawa

スコア45

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,20 @@
3
3
 
4
4
  ######どのような書き方をすれば、`store`内の値を`watch`で監視できますか?
5
5
 
6
+
7
+ #`store`側のコード
8
+ `creative.js`
9
+ ```
10
+ export const state = () => ({
11
+ template: {
12
+ id: '',
13
+ width: 0,
14
+ height: 0,
15
+ layers: [],
16
+ },
17
+ list_flag: '',
18
+ })
19
+ ```
6
20
  #現在のコード
7
21
  一部抜粋
8
22
  ```
@@ -21,20 +35,6 @@
21
35
  }
22
36
 
23
37
  ```
24
- #`store`側のコード
25
- `creative.js`
26
- ```
27
- export const state = () => ({
28
- template: {
29
- id: '',
30
- width: 0,
31
- height: 0,
32
- layers: [],
33
- },
34
- list_flag: '',
35
- })
36
- ```
37
-
38
38
  #.vueの全体コード
39
39
  `preview.vue`
40
40
  ```

1

henko

2018/12/20 08:43

投稿

tokuwgawa
tokuwgawa

スコア45

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