Nuxtのstoreの共通の処理をまとめたい

Question

前提・実現したいこと

Nuxtを（javascript自体も）勉強しはじめの者です。
Nuxtでフロントエンド、Laravelをバックエンドにして
業務管理システムを作っています。

顧客一覧や、商品一覧、注文一覧を作成する為、storeからAPIでデータを取得しようとしています。

例えば、顧客データ用のstoreを該当のコードのように作成しました。
商品や注文も、store内の処理は全て同じで問題ないのですが、その場合、

商品（product）や注文（order）はそれぞれ、store/product.js、store/order.jsとして作成した方が良いのでしょうか？
もしその場合、共通の処理はどのように書けばよいのでしょうか？

質問が不慣れで、足りない情報もあるかもしれませんが、何卒よろしくお願いいたします。

該当のソースコード

// store/customer.js

export const state = () => ({
  items: {},
  item: {},
})

export const getters = {
  list(state) {
    return state.items
  },
  show(state) {
    return state.item
  },
}

export const mutations = {
  set(state, response) {
    state.items = response
  },
  show(state, response) {
    state.item = response
  },
  update(state, data) {
    state.items.data.forEach((item, index) => {
      if (item.id === data.id) {
        state.items.data.splice(index, 1, data)
      }
    })
  },
  store(state, data) {
    state.items.data.unshift(data)
  },
  destroy(state, id) {
    state.items.data.forEach((item, index) => {
      if (item.id === id) {
        state.items.data.splice(index, 1)
      }
    })
  },
}

export const actions = {
  async search({ commit }, query) {
    const response = await this.$axios
      .$post(`/server/api/${this.app.context.params.slug}/search`, query)
      .catch((err) => {
        console.log(err)
      })
    commit('set', response)
  },
  async show({ commit }, query) {
    const response = await this.$axios
      .$get(`/server/api/${this.app.context.params.slug}/${query}`)
      .catch((err) => {
        console.log(err)
      })
    commit('show', response)
  },
  async update({ commit }, item) {
    const response = await this.$axios
      .$patch(`/server/api/${this.app.context.params.slug}/${item.id}`, item)
      .catch((err) => {
        console.log(err)
      })
    commit('update', response)
  },
  async store({ commit }, item) {
    const response = await this.$axios
      .$post(`/server/api/${this.app.context.params.slug}`, item)
      .catch((err) => {
        console.log(err)
      })
    commit('store', response)
  },
  async destroy({ commit }, item) {
    const response = await this.$axios
      .$delete(`/server/api/${this.app.context.params.slug}/${item.id}`)
      .catch((err) => {
        console.log(err)
      })
    commit('destroy', response)
  },
}

試したこと

１、上記コードをコピペした。ほぼ思い通りの動作になりましたが、処理が全く同じなので、まとめ方を模索しておりました。そもそもその考え方が間違っている？？

２、store/common.js などを作って、各ページ同じstoreファイルを使用するようにしてみました。
stateも共通のため、ページを遷移する度に、APIから取得してきて再描画するかたちになってしまいました。
やはりデータはそれぞれ保持した方がよいですよね？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

nuxt 2.14.6
Laravel 8.21.0

Comments

[plasticgrammer]

保持させている items、item は画面間で共有させるケースはあるのでしょうか？
共有させる必要がないなら、actionsの各関数からpromiseオブジェクト（$getや$postの返り値）を返して、各処理で例外とデータ受け取りを実装したほうが自然かと思いました。

[Stylemiya]

ご返信ありがとうございます。知識が薄く、actionsから、ミューテーションでstateにセットするまでが普通なのだと思っていました。間違っていたら申し訳ありませんが、state に セットしないという事でしょうか？

[plasticgrammer]

> state に セットしないという事でしょうか？
その理解であっています。
ですが、その場合はわざわざstoreを使う必要もないので、少し訂正と補足をさせてください。
実際には以下のようなイメージです。
1) axiosを使用した処理を共通化
2) storeから1)を利用して取得したデータをstoreに保持
　※保持する必要がないのであれば、ビュー側の処理から直接1)を利用

1)については下記サイトにあるコードのようなイメージです。
https://qiita.com/itouuuuuuuuu/items/4132e3b7ddf2cbf02442

[Stylemiya]

ありがとうございます。参考にしてみます