前提・実現したいこと
vue.jsの兄弟コンポーネント間でのメソッドのやり取りで悩んでいます。
簡単に言いますと、兄コンポーネントから弟コンポーネントのメソッドを呼びたいのです。
それをVuexを使って実現したいです。
状況説明
今は、兄コンポーネントから親コンポーネントに$emit
、親コンポーネントから弟コンポーネントに$refs
経由で実現しようとしています。
①button
のonclick
イベントでoyaFunc
を呼び出す。
vue
1// Ani.vue 2<template> 3 <div> 4 <button @click="aniClick"></button> 5 </div> 6<template> 7<script> 8export default { 9 ~(略)~ 10 methods: { 11 aniClick() { 12 this.$emit('oyaFunc'); 13 }, 14 }, 15} 16</script>
②oyaFunc
経由でcallOtouto
を呼び出す。
vue
1// Oya.vue 2<template> 3 <oya> 4 <ani @oyaFunc="callOtouto"></ani> 5 <otouto refs="bbb"></otouto> 6 </oya> 7<template> 8<script> 9export default { 10 ~(略)~ 11 methods: { 12 callOtouto() { 13 this.$refs.bbb.otoutoFunc(); 14 }, 15 }, 16} 17</script>
③refsのbbb
を参照してOtouto.vue
のotoutoFunc
を実施する。
vue
1// Otouto.vue 2<template> 3 <div> 4 {{ message }} 5 </div> 6<template> 7<script> 8export default { 9 data () { 10 return { 11 message: '', 12 } 13 }, 14 methods: { 15 otoutoFunc() { 16 this.message = ★★axios通信の結果★★; 17 }, 18 }, 19} 20</script>
疑問点
いろいろと調べていくと、あまり親から子のメソッドを呼ぶべきでない、$refs
は使うべきでないという記述が所々ありました。
小規模なアプリでは良いが、後々辛くなる云々…。
それならばVuexのstateで管理するほうが良い、というものがありましたが、
具体的な(上記例のような場合の)例がなくて困っております。
Vuexでの考え方が分からないでいます。
教えていただきたいこと
Vuexのstate
、mutations
、actions
、getters
を作成し、state
への何らかの値の出し入れまでは実現し、理解しているつもりです。
上記例のような場合、どのようにVuexで実現するのか教えていただきたいです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー