Nuxtのドキュメント( here )では、オプションでモジュールファイルを個別のファイルに分割できます:state.js
、actions.js
、mutations.js
およびgetters.js
。 '
私はこれがどのように行われるかの例を見つけることができないようです-ルートレベルでVuexストアをstate.js
、actions.js
、mutations.js
、およびgetters.js
に分解します、および個々のモジュールファイルに保存されますが、モジュール自体を分割することはありません。
だから、現在私は:
├── assets
├── components
└── store
├── moduleOne.js
├── moduleTwo.js
└── etc...
そして私が持ちたいのは:
├── assets
├── components
└── store
└── moduleOne
└── state.js
└── getters.js
└── mutations.js
└── actions.js
└── moduleTwo
└── etc...
これを試してみるには、/store/moduleOne/state.js
に次のものがあります。
export const state = () => {
return {
test: 'test'
}
};
/store/moduleOne/getters.js
には次のものがあります。
export const getters = {
getTest (state) {
return state.test;
}
}
私のコンポーネントでは、$store.getters['moduleOne/getters/getTest']
でこれにアクセスしています
ただし、デバッガとVue devtoolsを使用すると、ゲッターファイルで状態にアクセスできないようです-ローカルファイルで状態を探しているようですので、state.test
は未定義。
state.js
ファイルからgetters.js
ファイルにstate
をインポートしようとしても機能しないようです。
Nuxtでこのようにストアを分割する方法の例はありますか?
私はnuxt 2.1.0
を使用しています。次のようなものが必要な場合:
私のstore/index.js
名前空間があることを確認してください:true
import Vuex from 'vuex';
import apiModule from './modules/api-logic';
import appModule from './modules/app-logic';
const createStore = () => {
return new Vuex.Store({
namespaced: true,
modules: {
appLogic: appModule,
api: apiModule
}
});
};
export default createStore
私のstore/api-logic/index.js
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
const defaultState = {
hello: 'salut I am module api'
}
const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;
export default {
state,
actions,
mutations,
getters
}
私のstore/api-logic/getters.js
export default {
getHelloThere: state => state.hello
}
私のstore/app-logic/index.js
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
const defaultState = {
appLogicData: 'bonjours I am module Logic'
}
const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;
export default {
state,
actions,
mutations,
getters
}
私のstore/app-logic/getters.js
export default {
getAppLogicData: state => state.appLogicData
}
アプリ内のどこでも
computed: {
...mapGetters({
logicData: 'getAppLogicData',
coucou: 'getHelloThere'
})
},
mounted () {
console.log('coucou', this.coucou) --> salut I am module api
console.log('logicData', this.logicData) --> bonjours I am module Logic
}
ボーナスポイント
モジュール間で通信したい場合、たとえば、api-logicで何かをトリガーするapp-logicのアクション。したがって、app-logic(モジュール1)からapi-logic(モジュール2)
root: true
を指定すると、ストアのルートの検索が開始されます。
store/app-logic/actions.js
callPokemonFromAppLogic: ({ dispatch }, id) => {
dispatch('callThePokemonFromApiLogic', id, {root:true});
},
store/api-logic/actions.js
callThePokemonFromApiLogic: ({ commit }, id) => {
console.log('I make the call here')
axios.get('http://pokeapi.salestock.net/api/v2/pokemon/' + id).then(response => commit('update_pokemon', response.data))
},
store/api-logic/index.js
に別のエントリを追加します
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
const defaultState = {
appLogicData: 'bonjours I am module Logic',
pokemon: {}
}
const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;
export default {
state,
actions,
mutations,
getters
}
store/api-logic/mutations.js
にポケモン変異を追加します:p
update_pokemon: (state, pokemon) => {
state.pokemon = pokemon
}
アプリ内のどこでも:
computed: {
...mapGetters({
bidule: 'bidule',
pokemon: 'getPokemon'
})
},
mounted() {
console.log('bidule', this.bidule)
this.callPokemonFromAppLogic('1') --> the call
console.log('the pokemon', this.pokemon.name) --> 'bulbasaur'
},
methods: {
...mapActions({
callPokemonFromAppLogic: 'callPokemonFromAppLogic'
}),
}
そしてVoilà私はそれが明確だったことを望みます。コード例:
ファイルでdefault
エクスポートを使用して、目的の効果を達成します(index.js
を除き、名前付きエクスポートはありません)
例は、Nuxt.jsテストスイートで直接見つけることができます( https://github.com/nuxt/nuxt.js/tree/dev/test/fixtures/basic/store/foo ) 。
basic
フィクスチャを実行して/ storeページにアクセスすると、次の結果が表示されます。
モジュール自体の「繰り返される」内容は、分割された値が優先されることを示しています(そうでない場合、getVal
は10を返しませんが99とstate.val
は4を返しますが2)。
store.vueコード:
<template>
<div>
<h1>{{ baz }}</h1>
<br>
<p>{{ $store.state.counter }}</p>
<br>
<h2>{{ getVal }}</h2>
<br>
<h3>{{ getBabVal }}</h3>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters('foo/bar', ['baz']),
...mapGetters('foo/blarg', ['getVal']),
...mapGetters('bab', ['getBabVal'])
}
}
</script>