うしろのこの本ください

なんでもかきます

Vuex の action に依存したコンポーネントってさ

なんか詰まったとかじゃなくて、 Vuex そろそろやったるかと思ってやった時にあれ?ってなったことがあったので

例えば SFC に切り出した、非同期で API を叩いて JSON を貰ったら state を更新するボタンがあったとして

components/fetchData.vue

<template>
    <button @click="fetchData()">更新</button>
</template>

<script>
export default {
  methods : {
    async fetchData (store) {
      await store.dispatch('fetchDataAsync')               
    }
  }
}
</script>

store/index.js

import Vuex from 'vuex'
import axios from '@nuxtjs/axios'

const store = new Vuex.Store({
  state : {
    data : []
  },
  mutations : {
    dataUpdate ({ state }, data) {
      state = data.data
    }
  },
  actions : {
    async fetchDataAsync ({ commit }) {
      const { data } = await axios.get('http://my-api/data') 
      commit('dataUpdate', data)
    }
  }
})

export default store

動くか動かないかは置いといて(思い出しながら手書き)、こういう状況になった時コンポーネントコンポーネントと言える?

要するに Vuex.Store に依存した実装をしたコンポーネントは部品になってるのかな?とふと思った

Storybook を使った事がないのでコンポーネントカタログがどういうものなのか全然知らないんだけど、非同期な実装をした時 action にロジックを書くとコンポーネントが Vuex.Store に依存する

このコンポーネントは公開したい時 Vuex を再実装する事になると思うんだけど、そんなもんなのかね

普通こんなことしないぞバカって言われたら…うん…

まあ他は特に疑問もなく、多少躓きはあったけど Vuex 楽しくやれてるのでやって良かった、引数分割代入って Vuex やるまで知らなかったわ

おわり