ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Vue.jsでstoreの処理をファイルを分けて記載する方法

Vue.js×Firebaseで色々試しているのですが、

Firebaseへの保存はめちゃめちゃ簡単で、firebaseからのデータの取り出しが結構頭使うなぁという印象です。

Vuexをうまく使って、storeでデータを用意しておいて、各コンポーネントでソートした方がいいのでは?と思ったりして色々試していますが、今の所スッキリしません。

 

さて、本題ですが、

store.jsの記載が多くなったら分割したくなってきました。

分割の方法について記載します。

VueCLI3.0使ってます。

1 storeディレクトリを作成し、処理を記載したいjsファイルの作成

image

いいね!の表示を作るためにlike.jsファイルを作成しました。

 

2 like.jsに処理を記載

//like.js

import { store } from '../store'

export default {
namespaced: true,

state: {
data: {
message: 'likeもじゅーーーーーーーーール!!'
}
},
mutations: {

},
actions: {

},
getters: {
}
}
 

3 store.jsにimportする

//store.js

import like from '@/store/like'

export default new Vuex.Store({

〜〜〜中略〜〜〜

getters: {

},
modules: {
	like: like
	}
})
 

4 表示してみて確認

hyouji.vue

 

〜〜前略

 

{{ $store.state.like.data.message }}
これで、 image

表示できましたので、反映されました。

store.jsからデータを取り出す時と違って、stateの後ろに、.like(モジュール名)が入りますので、注意してください。

これで、どのコンポーネントからでもstoreからfirebaseのデータを扱うことができそうです。

 

それでは!