[Nuxt.js][Vuex] Vueファイル以外の外部ファイルでStoreのデータを参照したい

Question

前回の質問で、Vuexのstore/index.jsにあるcurrentModelと言うデータを取得する際に出るエラーに関して質問しました。
開発途中で、Vueファイル以外の場所でVuex Storeのデータを取得したい場合は、「モジュールモード」でないといけないと言う情報を得たので、修正しましたが、また新たなエラーが出たので質問させていただきます。

まず、モジュールモードにするために、store/index.jsを削除し、store/store.jsを作りました。
以下のコードを記述してあります。

export const state = () => ({
    currentModel: null,
})

export const getters = {
    getCurrentModel(state) {
        return state.currentModel
    }
}

export const mutations = {
    saveCurrentModel(state, currentModel){
        state.currentModel = currentModel;
    }
}

そして、jsファイル内で以下のようにして、StoreのcurrentModelを取得しようとしました。

import store from '~/store/store.js'

//省略

const Model = store.getters['store/getCurrentModel'];

//省略

しかしながら、このようなエラーが出ます。

TypeError: Cannot read property 'getters' of undefined

解決法をご教授いただけると大変助かります。
よろしくお願い致します。

Answer 1

storeというものは、複数のページ（.vue)から共通で使える変数を保存するところなので、まったく外部の.jsから参照するというのは趣旨に反しているのではないでしょうか。

プログラムが動いている間は常に少なくとも１つはアクティブな vueファイルがあるはずですから、そこから自前の関数を呼ぶ時に必要なデータを引数で渡せば良いと思います。

export default function ({ current_model }) {
  console.log(current_model)
}

my_function( this.$store.getters['currentModel'])

リアクティブ性を維持するのは難しくなるかも。

追記：

もしかして、複数のページで同じ処理を行うのをまとめたいということでしょうか？
それならPluginを使うと良いです。

公式マニュアル：
https://jp.vuejs.org/v2/guide/plugins.html

export default ({ store }) => { return xxx }

Comments

[rihako]

ご回答ありがとうございます。プラグインご紹介いただきありがとうございます。
確かに趣旨に反していますね...本当は、.vueで取得しているデータを、importしているjsファイルに渡したいだけなのですが。。
以下のように.vueのmouted()でnewインスタンスをしている時に、引数を渡すことはできるのでしょうか..。調べてもあまり出てこなかったtのでとりあえずVuexを使ってみたと言う感じです。

import threeModel from './js/threeModel';

//省略
data () {
return {
model: 'コンパイル後のglbファイルのパス',
}
},
mounted () {
this.threeModel = new threeModel({
model: this.model,
});
},

[gambaldia]

https://github.com/anthonysimone/threejs-vue-example
はご覧になりましたか？

[rihako]

おおお、初めて読みました、ありがとうございます。
とても参考になります！！！
この方のを参考にしていて、.vue内のmethodsにかくことはお勧めしないと書いてあったのでとりあえずそれに従っていました。でもこのgithub見る限り、別に問題ないんですかね...
https://qiita.com/misaki_mofu/items/145ac26d600b429a6f8a

[gambaldia]

Nuxtをつかっているのであれば、mounted() よりも fetch()のほうが良いと思います。
Storeも使えます。

async fetch ({store, params}) {
const data = await store.dispatch('fetchData', params)

[rihako]

ありがとうございます！！ちょっといろいろ試して来ます！！