Проблемы с регистрацией модулей Vuex, либо пространства имен не найдены, либо getters.default пуст - PullRequest
Новая
       55

Проблемы с регистрацией модулей Vuex, либо пространства имен не найдены, либо getters.default пуст

0 голосов
/ 07 июня 2018

Я ходил кругами, пытаясь настроить модули Vuex для проекта.Я попытался следовать измененному примеру Криса Фрица, который демонстрирует более продуктивную регистрацию компонентов, как показано здесь: https://www.youtube.com/watch?v=7lpemgMhi0k,, но когда я пытаюсь использовать ... mapActions, у меня возникают проблемы, которые пространство имен не можетбыть обнаруженным, если я пытаюсь зарегистрировать модули вручную, я получаю сообщение об ошибке, что getter.default ожидал действия, но вернул {}

Я постараюсь сохранить это в чистоте - первая часть информации мояНастройка модуля, следующий раздел - это то, что создает первую проблему и код, вторая - вторая попытка, которая вызывает проблему получателя.

Настройка моего модуля ...

./ store / modules / ModuleName :

. / store / modules / ModuleName / index.js 

import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

const namespaced = true

export default {
    namespaced,
    state () {
        return {
            foo: 'bar'
        }
    },
    actions,
    getters,
    mutations
}

. / Store / modules / ModuleName / actions.js 

import types from './types'

const myFunction = ({ commit, state }) => {
  commit(types.FOO, bar)
}

export default {
   myFunction
}

. / Store / modules / ModuleName / getters.js 

const Foo = (state) => {
    return state.foo
}

export default {
    Foo
}

. / Store / modules / Имя_модуля / mutations.js 

import types from './types'

const mutateFoo = (state, payload) => {
    state.Foo = payload
}

export default {
    [types.FOO]: mutateFoo
}

./store/modules / ModuleName / types.js 

export default {
    FOO: 'foo'
}

Version one

Это предпочтительный способ, которым я хотел бы сделать это:

Ошибка: пространство имен модуля [vuex] не найдено в mapActions (): myModule /

. / Store / modules.js 

const requireModule = require.context('../store/modules/', true, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    // Use index to prevent duplicates of the same module folder...
    if (fileName.includes('index')) {
        // now I just want the folder name for the module registration
        const moduleName = fileName.replace(/(\.\/|\/.+\.js)/g, '')
        modules[moduleName] = requireModule(fileName)
    }
})

export default modules

. / Store / index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

. Значение компонента: 

<template>
    ...
</template>

 <script>
      import { mapState, mapActions } from 'vuex'

      export default {
          computed: { 
               ...mapState('ModuleName', { title: state => state.foo })
          },

          methods: {
               ...mapActions('ModuleName, ['myFunction'])
          }
      }

 </script>

Версия вторая

Ошибка:

Uncaught Ошибка: геттеры [vuex] должны быть работоспособны, но "getters.default" в модуле "Урожай" равен {}.

. / Store / index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import Harvest from './modules/myModule'

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        myModule
    }
})

. Значение компонента: 

<template>
    ...
</template>

 <script>
      export default {
          computed: { 
               title () { return this.$store.getters.myModule }
          }
      }

 </script>

Чего мне не хватает?Может ли кто-нибудь помочь пролить немного света, чтобы это сработало?

1 Ответ

0 голосов
/ 07 июня 2018

Для вашей Второй версии , поскольку вы export default, ваше состояние импорта должно быть: 

import actions from './actions'
import getters from './getters'
import mutations from './mutations'

const namespaced = true

export default {
    namespaced,
    state () {
        return {
            foo: 'bar'
        }
    },
    actions,
    getters,
    mutations
}

Для версии 1 сначала вы должны изменить оператор импорта, как указано выше, а затем изменить

  if (fileName.includes('index')) {
    // now I just want the folder name for the module registration
    const moduleName = fileName.replace(/(\.\/|\/.+\.js)/g, '')
    modules[moduleName] = requireModule(fileName).default
  }

Надеюсь, это поможет!

...