NuxtでVuexを使用したActions
915 ワード
Nuxt.jsでVuexを使用する場合は、リファレンスをインストールする必要はありません.Nuxtはこの問題を解決してくれました.
Nuxtのstoreディレクトリの下にjsファイルを作成するだけです
各jsファイルはモジュールであってもよい(もちろんindex.jsを除いてルートモジュールである)
上記のコードはtoolsモジュールです
vueファイルで使用すると次のようになります.
Nuxtのstoreディレクトリの下にjsファイルを作成するだけです
各jsファイルはモジュールであってもよい(もちろんindex.jsを除いてルートモジュールである)
//tools.js
export const state = () => ({})
export const mutations = {}
export const actions = {
getTools({commit,dispatch}){
return axios.get('/tools/searchAll')
}
}
上記のコードはtoolsモジュールです
vueファイルで使用すると次のようになります.
// state
this.$store.state.count // state count
this.$store.state.tools.count // tools state count
// mutations
this.$store.commit('SET_TOKEN',params) // mutations
this.$store.commit('tools/SET_TOKEN',params) //tools mutations
// actions
this.$store.dispatch('getTools') // actions getTools
this.$store.dispatch('tools/getTools') //tools actions getTools