네임스페이스를 찾을 수 없거나 getters.default가 비어 있는 Vuex 모듈 등록 문제

네임스페이스를 찾을 수 없거나 getters.default가 비어 있는 Vuex 모듈 등록 문제

프로젝트를 위해 Vuex 모듈을 설정하기 위해 여러 곳을 돌아다녔습니다.Chris Fritz가 컴포넌트를 보다 생산적인 방법으로 등록하는 예를 https://www.youtube.com/watch?v=7lpemgMhi0k,에서 확인했는데, mapActions를 사용하려고 하면 네임스페이스를 찾을 수 없다는 문제가 발생하고 모듈을 수동으로 등록하려고 하면 getter가 예상한 오류가 발생합니다.동작이지만 {}이(가) 반환되었습니다.

이것을 깨끗하게 유지하겠습니다.첫 번째 로트는 모듈 셋업입니다.다음 섹션은 첫 번째 문제와 코드를 생성하는 섹션입니다.다음 섹션은 게터 문제를 일으키는 두 번째 시도입니다.

내 모듈 설정...

./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/ModuleName/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'
}

버전 1

바람직한 방법은 다음과 같습니다.

오류: mapActions(): myModule/에서 [vuex] 모듈 네임스페이스를 찾을 수 없습니다.

./store/filename.displays

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.displaces

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

Vue.use(Vuex)

export default new Vuex.Store({
    modules
})

.Vue 컴포넌트:

<template>
    ...
</template>

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

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

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

 </script>

버전 2

오류:

수집되지 않은 오류: [vuex] getters는 함수여야 하지만 "Harvest" 모듈의 "getters.default"는 {}입니다.

./store/index.displaces

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

Vue.use(Vuex)

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

.Vue 컴포넌트:

<template>
    ...
</template>

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

 </script>

제가 무엇을 빠뜨리고 있나요?누가 이 일을 할 수 있게 도와줄 수 있나요?

버전 2에서는export defaultImport 상태는 다음과 같습니다.

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의 경우 먼저 위와 같이 Import 스테이트먼트를 변경한 후 변경해야 합니다.

  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
  }

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/50731963/issues-with-registering-vuex-modules-either-namespaces-not-found-or-getters-def