Vuexを使ったVue.jsのアプリと、ライブラリのコンポーネントが使っているVuexを共存させる方法を教えてください

Question

前提

1. Vue.js と Vuex で作っているWEBアプリを、メインアプリとします。
2. 別にパッケージとしてインストールした Vue.js と Vuex を使ったコンポーネントを、ライブラリコンポーネントと呼ぶことにします。

実現したいこと

メインアプリにライブラリコンポーネントを組み合わせて使いたいです。

発生している問題

組み合わせるとライブラリコンポーネント側の Vuex が正常に動作しません。
メインアプリ側の Vuex とライブラリコンポーネント側の Vuex が干渉するようです。

該当のソースコード

// メインアプリ側の設定
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    app_var1: false,
  },
})

// ライブラリコンポーネント側の設定
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

// "() => " を外すと画面内にコンポーネントが複数あったとき変数が共有されてしまうため、このようにしています
const store = () => new Vuex.Store({
  state: {
    library_local_var1: false,
  },
})

export default store

試したこと

一時的にメインアプリ側の Vuex を外したところ、ライブラリコンポーネント側の Vuex が動作しました。

補足情報

"vuex": "^3.0.1"
"vue": "^2.5.17"

Answer 1

ライブラリコンポーネント側で Vue.use(Vuex) を外したところ正常に動作するようになりました。

コメントでアドバイスを頂きましたが「ライブラリ」は利用するアプリケーションから見てライブラリのように感じるだけであって、ライブラリから見ればそこは一つのアプリケーションですので、ストアは使えていいはずだと思いました。

そこで試行錯誤した結果、両方で new していることが問題ではなく、両方で Vue.use(Vuex) を実行しているのがいけなかったとわかりました。

まとめると次のような構造になっていると動くことがわかりました。

// メインアプリ側
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store new Vuex.Store({
  state: {
    app_var1: false,
  },
})

export default {
  store, // ← グローバルな store
}

// ライブラリコンポーネント側
import Vuex from "vuex"

const store = () => new Vuex.Store({
  state: {
    library_local_var1: false,
  },
})

export default {
  store, // ← ライブラリのスコープだけで排他的に有効になる store
}

Answer 2

ライブラリでvuexを使うこと自体が一般的ではないので、まずライブラリにvuexを使うところを改めた方が良いのではないかと思います。1アプリケーションに1ストアが基本となります。

Comments

[ginkan]

考えてくださってありがとうございます