質問編集履歴

2

書式の改善

2022/09/14 03:50

投稿

yochy0220
yochy0220

スコア10

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
  [vuex] expects string as the type, but found object.
15
15
  ```
16
16
  store.dispatchにて, payloadとしてオブジェクトを渡すことを意図しています。
17
- mutation, actionの関数名を, 変数で定義しているため、なんらかの影響が発生しているかもしれません。
17
+ mutation, actionの関数名を, 動的に定義しているため、なんらかの影響が発生しているかもしれません。
18
18
 
19
19
  ### 該当のソースコード
20
20
  ```store.js

1

質問の追記

2022/09/14 03:49

投稿

yochy0220
yochy0220

スコア10

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,77 @@
17
17
  mutation, actionの関数名を, 変数で定義しているため、なんらかの影響が発生しているかもしれません。
18
18
 
19
19
  ### 該当のソースコード
20
+ ```store.js
21
+ import { createStore } from "vuex"
22
+ import createPersistedState from "vuex-persistedstate";
23
+ import { UPDATE_BOOK, UPDATE_CURRENT } from "../mutation-types";
24
+
25
+ const state = {
26
+ books: [],
27
+ current: null
28
+ }
29
+
30
+ const getters = {
31
+ booksCount( state ) {
32
+ return state.books.length
33
+ },
34
+ allBooks( state ) {
35
+ return state.books
36
+ },
37
+ getRangeByPage( state ) {
38
+ return page => {
39
+ const SIZE = 3
40
+ return state.books.slice((page-1) * SIZE, (page-1) * SIZE + SIZE)
41
+ }
42
+ },
43
+ getBookById(state) {
44
+ return id => {
45
+ state.books.find( book => book.id === id )
46
+ }
47
+ },
48
+ current(state) {
49
+ return state.current
50
+ }
51
+ }
52
+
53
+ const mutations = {
54
+ [UPDATE_CURRENT]( state, payload ) {
55
+ state.current = payload
56
+ },
57
+ [UPDATE_BOOK]( state, payload ) {
58
+ let b = getters.getBookById(payload.id)
59
+ if (b) {
60
+ // assignメソッドで更新しなければ, 変更が検知されない
61
+ Object.assign(b, payload)
62
+ } else {
63
+ state.books.push(payload)
64
+ }
65
+ }
66
+ }
67
+
68
+ const actions = {
69
+ // {commit} = context.commitを分割代入
70
+ [UPDATE_CURRENT]( {commit}, payload ) {
71
+ commit(UPDATE_CURRENT, payload)
72
+ },
73
+ [UPDATE_BOOK]( {commit}, payload ) {
74
+ commit(UPDATE_BOOK, payload)
75
+ }
76
+ }
77
+
78
+ export default createStore({
79
+ state,
80
+ getters,
81
+ mutations,
82
+ actions,
83
+ strict: true,
84
+ plugins: [createPersistedState({
85
+ key: 'reading-recorder',
86
+ storage: localStorage
87
+ })]
88
+ })
89
+
90
+ ```
20
91
 
21
92
  ```BookInfo.vue
22
93
  <template>
@@ -64,7 +135,7 @@
64
135
  // }
65
136
  </script>
66
137
  ```
67
- templateタグの中には, 特に問題はないと思います。コメントアウトしている部分は, 参考書に記載されているVue2での構文です。その中で, method内でのthis\[UPDATE_CURRENT](this.book)の部分を, script setup構文で再現したいと考えています。
138
+ templateタグは, 特に問題はないと思います。コメントアウトしている部分は, 参考書に記載されているVue2での構文です。その中で, method内での, "this\[UPDATE_CURRENT](this.book)"の部分を, script setup構文内の"onclick()"内で再現したいと考えています。
68
139
 
69
140
  ### 試したこと
70
141