web-dev-qa-db-ja.com

Nuxt + Vuex-Vuexモジュールを個別のファイルに分解する方法

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でこのようにストアを分割する方法の例はありますか？

javascriptvue.jsvuexnuxt.jsnuxt
11
Guy Harper

私はnuxt 2.1.0を使用しています。次のようなものが必要な場合：

Store module Vuex with Nuxt

私の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

ModuleOneで

私の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
}

モジュール2

私の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'
  }),
}

最後にVue devToolは次のようになります:) Vue devTool screenshot store

そしてVoilà私はそれが明確だったことを望みます。コード例：

https://github.com/CMarzin/nuxt-vuex-modules

6
Corentin Marzin

あなたの問題

ファイルでdefaultエクスポートを使用して、目的の効果を達成します（index.jsを除き、名前付きエクスポートはありません）

例

例は、Nuxt.jsテストスイートで直接見つけることができます（ https://github.com/nuxt/nuxt.js/tree/dev/test/fixtures/basic/store/foo ） 。

basicフィクスチャを実行して/ storeページにアクセスすると、次の結果が表示されます。

enter image description here

モジュール自体の「繰り返される」内容は、分割された値が優先されることを示しています（そうでない場合、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>
0
manniL