Vue
Vue.jsのVuexのstore.jsの処理をファイルを分けて記載する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Vue.js の Vuex の store.js の記述が多くなって見づらくなってきたので、ファイルを分割する方法について調べてみました。
環境
Vue 2.*
store ディレクトリを作成し、処 理を記載する js ファイルの作成
いいね!の表示を作るために like.js ファイルを作成しました。
like.js に処理を記載
like.js
import { store } from "../store"
export default {
namespaced: true,
state: {
data: {
message: "likeもじゅーーーーーーーーール!!",
},
},
mutations: {},
actions: {},
getters: {},
}
store.js に import する
store.js
import like from '@/store/like'
export default new Vuex.Store({
〜〜〜中略〜〜〜
getters: {
},
modules: {
like: like
}
})
表示してみて確認
hyouji.vue
〜〜前略
{{ $store.state.like.data.message }}
これで、
表示できましたので、反映されました。
まとめ
store.js からデータを取り出す時と違って、state の後ろに、.like(モジュール名)が入りますので、注意してください。
これで、どのコンポーネントからでも store から firebase のデータを扱うことができそうです。
何か記事で変なところありましたら TwitterDM などでご連絡ください!それでは!