Nuxt + Vuex - Как мне разбить модуль Vuex на отдельные файлы?

Question

В документации Nuxt ( здесь ) говорится: «При желании вы можете разбить файл модуля на отдельные файлы: 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 из моего state.js файла в мой getters.js файл, похоже, тоже не работает.

У кого-нибудь есть экзаменКак им удалось сломать магазин в Nuxt?

Answer 1

Я использую nuxt 2.1.0 Если вы хотите что-то вроде этого:

По моему store/index.js

Убедитесь, что у вас есть namespaced: 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

В модуле One

В моем 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
}

Бонусная точка

Если вы хотите связать между модулями, например, действие в app-logic, которое вызывает что-то в api-logic.Таким образом, app-logic (модуль один) и api-logic (модуль два)

Когда вы укажете 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 должен выглядеть следующим образом :)

И вуаля, надеюсь, было понятно.Пример кода:

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

Answer 2

Ваша проблема

Используйте 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>