teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Vue.js x Rails　コンポーネントからアクションを参照出来ない Cannot read property 'dispatch' of undefined"

編集履歴

質問編集履歴

7

追記

2019/09/25 11:26

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
File without changes
test CHANGED
@@ -2,11 +2,17 @@
2
2
 
3
3
 
4
4
 
5
+ BookInfoコンポーネントのonclickメソッド実行する時のエラーを解決したい
6
+
7
+
8
+
9
+
10
+
5
11
  下記エラーが発生している原因を知りたいです。
6
12
 
7
13
  BookInfoコンポーネントのonclickメソッド実行時に下記エラーが発生してしまいます。
8
14
 
9
- どなたか解決方法分かるかた見えましたらご教授頂きたく思います。
15
+ どなたか解決方法分かる方見えましたらご教授頂きたく思います。
10
16
 
11
17
 
12
18
 

6

誤記

2019/09/25 11:26

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
File without changes
test CHANGED
@@ -100,7 +100,7 @@
100
100
 
101
101
 
102
102
 
103
- ##book.js
103
+ ##main.js
104
104
 
105
105
  ```
106
106
 

5

簡略化

2019/09/25 10:32

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
@@ -1 +1 @@
1
- Vue.js x Rails　ストアからアクションを引っ張れない Cannot read property 'dispatch' of undefined"
1
+ Vue.js x Rails　コンポーネントからアクションを参照出来ない Cannot read property 'dispatch' of undefined"
test CHANGED
File without changes

4

タイトル　変更

2019/09/25 10:02

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
@@ -1 +1 @@
1
- Vue.js x Rails　ストアからアクションを引っ張れない
1
+ Vue.js x Rails　ストアからアクションを引っ張れない Cannot read property 'dispatch' of undefined"
test CHANGED
File without changes

3

簡略化

2019/09/25 09:59

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
File without changes
test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  import createPersistedState from 'vuex-persistedstate'
50
50
 
51
- import { UPDATE_CURRENT, UPDATE_BOOK } from './mutation-types'
51
+ import { UPDATE_CURRENT} from './mutation-types'
52
52
 
53
53
 
54
54
 
@@ -58,234 +58,162 @@
58
58
 
59
59
  export default new Vuex.Store({
60
60
 
61
- strict: true, //厳密性 本番環境では、消しておく
62
-
63
61
  state: {
64
62
 
65
- books:[], //レビューと書籍の情報を格納する
66
-
67
63
  current: null
68
64
 
69
65
  },
70
66
 
71
67
  getters:{
72
68
 
73
- bookCount(state){
69
+ current(state){ //現在編集中の書籍
74
-
70
+
75
- return state.books.length
71
+ return state.current
72
+
73
+ }
74
+
75
+ },
76
+
77
+ mutations:{
78
+
79
+ [UPDATE_CURRENT](state, payload){ //編集中の書籍(current)を更新
80
+
81
+ state.current = payload
76
82
 
77
83
  },
78
84
 
85
+ },
86
+
79
- allBooks(state){
87
+ actions:{
88
+
80
-
89
+ [UPDATE_CURRENT]({ commit }, payload){
90
+
81
- return state.books
91
+ commit(UPDATE_CURRENT,payload)
82
92
 
83
93
  },
84
94
 
85
- getRangeByPage(state){ //指定されたページのレビュー情報を引数ページ番号で返すメソッドを返すメソッド
86
-
87
- return page =>{
88
-
89
- const SIZE = 3
90
-
91
- return state.books.slice((page -1)) * SIZE, (page -1) * SIZE + SIZE
92
-
93
- }
94
-
95
- },
96
-
97
- getBookById(state){ //引数idでそのidのレビューを返すメソッドを返すメソッド
98
-
99
- return id =>{
100
-
101
- return state.books.find(book => book.id === id)
102
-
103
- }
104
-
105
- },
106
-
107
- current(state){ //現在編集中の書籍
108
-
109
- return state.current
95
+ },
96
+
97
+ })
98
+
99
+ ```
100
+
101
+
102
+
103
+ ##book.js
104
+
105
+ ```
106
+
107
+ import Vue from 'vue/dist/vue.esm.js'
108
+
109
+ // import Vue from 'vue'
110
+
111
+ import Router from './router/routerbook'
112
+
113
+ import store from './store.js'
114
+
115
+ import './plugins/element.js'
116
+
117
+ import BookInfo from './components/book/BookInfo.vue'
118
+
119
+
120
+
121
+
122
+
123
+ Vue.config.productionTip = false
124
+
125
+
126
+
127
+ //httpプロパティを追加
128
+
129
+ Vue.prototype.$http = (url,opts) => fetch(url,opts)
130
+
131
+
132
+
133
+ var app = new Vue({
134
+
135
+ el: '#app2',
136
+
137
+ router: Router,
138
+
139
+ store: store,
140
+
141
+ components:{
142
+
143
+ BookInfo
144
+
145
+ },
146
+
147
+ })
148
+
149
+ ```
150
+
151
+
152
+
153
+ ##BookInfo.vue
154
+
155
+ ```
156
+
157
+ <template>
158
+
159
+ <div class="clearfix" :class="{ linkable }" @click="onclick">
160
+
161
+ <div class="image"><img :src="book.image" /></div>
162
+
163
+ <div class="details">
164
+
165
+ <ul>
166
+
167
+ <li v-if="index">{{ index }}.</li>
168
+
169
+ <li>タイトル:{{book.title}} </li>
170
+
171
+ <li>作者{{book.author}}</li>
172
+
173
+ </ul>
174
+
175
+ </div>
176
+
177
+ </div>
178
+
179
+ </template>
180
+
181
+
182
+
183
+ <script>
184
+
185
+ import { mapActions } from 'vuex'
186
+
187
+ import { UPDATE_CURRENT } from './mutation-types'
188
+
189
+
190
+
191
+ export default {
192
+
193
+ name: 'book-info',
194
+
195
+ props: {
196
+
197
+ index: { type: Number },
198
+
199
+ linkable: { type: Boolean, default: false },
200
+
201
+ book: { type: Object }
202
+
203
+ },
204
+
205
+ methods: {
206
+
207
+ ...mapActions([UPDATE_CURRENT]),
208
+
209
+ onclick() {
210
+
211
+ this[UPDATE_CURRENT](this.book)
212
+
213
+ this.$router.push('/form')
110
214
 
111
215
  }
112
216
 
113
- },
114
-
115
- mutations:{
116
-
117
- [UPDATE_CURRENT](state, payload){ //編集中の書籍(current)を更新
118
-
119
- state.current = payload
120
-
121
- },
122
-
123
- [UPDATE_BOOK](state, payload){ //レビュー情報を更新
124
-
125
- let book = this.getters.getBookById(payload.id) //id値(payload)で既存のレビュー検索
126
-
127
- if (book) {
128
-
129
- Object.assign(book, payload) //既存のレビュー情報がある場合は、payloadで上書き
130
-
131
- } else {
132
-
133
- state.books.push(payload) //ない場合は、新規としてbooksステートに追加
134
-
135
- }
136
-
137
- },
138
-
139
- },
140
-
141
- actions:{
142
-
143
- [UPDATE_CURRENT]({ commit }, payload){
144
-
145
- commit(UPDATE_CURRENT,payload)
146
-
147
- },
148
-
149
- [UPDATE_BOOK]({ commit }, payload){
150
-
151
- commit(UPDATE_BOOK,payload)
152
-
153
- },
154
-
155
- },
156
-
157
- plugins: [createPersistedState({ //ストレージ保存のためのプラグイン有効化
158
-
159
- key: 'reading-recoder',
160
-
161
- storage: localStorage
162
-
163
- })]
164
-
165
- })
166
-
167
- ```
168
-
169
-
170
-
171
- ##book.js
172
-
173
- ```
174
-
175
- import Vue from 'vue/dist/vue.esm.js'
176
-
177
- // import Vue from 'vue'
178
-
179
- import Router from './router/routerbook'
180
-
181
- import store from './store.js'
182
-
183
- import './plugins/element.js'
184
-
185
- import BookInfo from './components/book/BookInfo.vue'
186
-
187
-
188
-
189
-
190
-
191
- Vue.config.productionTip = false
192
-
193
-
194
-
195
- //httpプロパティを追加
196
-
197
- Vue.prototype.$http = (url,opts) => fetch(url,opts)
198
-
199
-
200
-
201
- var app = new Vue({
202
-
203
- el: '#app2',
204
-
205
- router: Router,
206
-
207
- store: store,
208
-
209
- components:{
210
-
211
- BookInfo
212
-
213
- },
214
-
215
- })
216
-
217
- ```
218
-
219
-
220
-
221
- ##BookInfo.vue
222
-
223
- ```
224
-
225
- <template>
226
-
227
- <div class="clearfix" :class="{ linkable }" @click="onclick">
228
-
229
- <div class="image"><img :src="book.image" /></div>
230
-
231
- <div class="details">
232
-
233
- <ul>
234
-
235
- <li v-if="index">{{ index }}.</li>
236
-
237
- <li>タイトル:{{book.title}} </li>
238
-
239
- <li>作者{{book.author}}</li>
240
-
241
- </ul>
242
-
243
- </div>
244
-
245
- </div>
246
-
247
- </template>
248
-
249
-
250
-
251
- <script>
252
-
253
- // import { mapActions } from 'vuex'
254
-
255
- import {mapGetters, mapActions} from 'vuex/dist/vuex.esm.js'
256
-
257
- // import { UPDATE_CURRENT } from '@/mutation-types'
258
-
259
- import { UPDATE_CURRENT } from './mutation-types'
260
-
261
-
262
-
263
- export default {
264
-
265
- name: 'book-info',
266
-
267
- props: {
268
-
269
- index: { type: Number },
270
-
271
- linkable: { type: Boolean, default: false },
272
-
273
- book: { type: Object }
274
-
275
- },
276
-
277
- methods: {
278
-
279
- ...mapActions([UPDATE_CURRENT]),
280
-
281
- onclick() {
282
-
283
- this[UPDATE_CURRENT](this.book)
284
-
285
- this.$router.push('/form')
286
-
287
- }
288
-
289
217
  }
290
218
 
291
219
  }

2

追記

2019/09/25 09:48

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,12 @@
18
18
 
19
19
  ### 発生している問題・エラーメッセージ
20
20
 
21
+ ```
22
+
23
+ Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"
24
+
25
+ ```
26
+
21
27
 
22
28
 
23
29
  ```

1

誤字

2019/09/25 08:30

投稿

RubtMDqy2op3pZh
RubtMDqy2op3pZh

スコア8

test CHANGED
File without changes
test CHANGED
@@ -58,19 +58,19 @@
58
58
 
59
59
  books:[], //レビューと書籍の情報を格納する
60
60
 
61
- current: null //なにに使うか今の所、不明
61
+ current: null
62
-
62
+
63
- },
63
+ },
64
-
64
+
65
- getters:{ //ステートの内容を加工・取得
65
+ getters:{
66
-
66
+
67
- bookCount(state){ //登録済みのレビュー数返すメソッド
67
+ bookCount(state){
68
-
68
+
69
- return state.books.length //ステートのbooks配列の長さ
69
+ return state.books.length
70
-
70
+
71
- },
71
+ },
72
-
72
+
73
- allBooks(state){ //レヴューと書籍の情報返すメソッド
73
+ allBooks(state){
74
74
 
75
75
  return state.books
76
76