前提・実現したいこと
実現機能
画面中のデータ移動ボタン・・・データ移動ボタンを押すとストア内のデータを書き換える
このストアデータは件数が多いため、データ移動ボタンを押した際は、Loading表示をする。
環境
・Vue CLI
・Windows
発生している問題・エラーメッセージ
発生している問題
期待値としては、2.1の処理をした直後に、画面上にLoding表示を行いたいが、描画がされない。
現状ボタン押下時の処理は以下の流れです。
コンポーネント→アクション→ミューテーションの処理順で処理されていると思っています。
【コンポーネント側】 1. ボタン押下 2. actionの処理を実施 2.1 loading表示コンポーネントを表示するフラグをtrue(実際に画面に描画するためのフラグ 以下のa.vue内のdataインスタンスに保持) 2.2 データ移動のアクションを呼ぶ 【アクション側】 3. action.js 3.1 mutationを呼びデータを書き換える。 【ミューテーション側】 4.データ変更 【コンポーネント側】 アクション側からのリターンをコンポーネントが受ける 5.loadingコンポーネントを有効にするフラグをfalse
該当のソースコード(参考)
mutationの処理は、store内のデータ移動のみのため省略いたしました。
a.vue
<button @click="allMove()"></button> ・ ・ ・ methods: { ...mapActions([ actionOfAllMove: STORE_KEY + '/actionOfAllMove' ]), allMove(){ this.loading = true console.log('1') this.actionOfAllMove().then(_ => { console.log('3') this.loading = false }) }
action.js
const actionOfAllMove = async (context) { let mutationTypes = types.ALL_MOVE console.log('2') await context.commit(mutationTypes) }
試したこと
- ソースのa.vue内のallMove()アクションをthis.loading = trueのみにした場合、Loading表示された。
- console.logを利用し、処理順を確認 1→2→3の順で動作していることを確認
- loading=trueを 別ミューテーションに切って、action.js内のactionOfAllMove内で2回呼んだがLoading表示されない
教えていただきたい内容
・1つのアクション内で、Lodingフラグの即時反映(データの書き換え前に反映したい)
ちなみに、別の箇所で、axiosを使った通信処理をaction側から呼びcontext commitとしている箇所は正常にLoading表示が先に表示されているため、axios経由ではない ただのデータ移動の場合にcontext commitをした場合に発生していると思われる。
まだ、Vueをやり始めたばかりで未熟ですが、よろしくお願いいたします。
何でもいいので、コメントいただけると助かります。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。