Vue/Vuex 알 수 없는 작업 유형

Vue/Vuex 알 수 없는 작업 유형

어플리케이션에 Vuex를 구현하기 시작했고, 스토어를 모듈로 분할하기로 했습니다.

처음에는 Vuex 모듈의 동작을 테스트하기 위해 1개의 모듈만 만들었습니다.이는 이전에 Vuex 모듈을 사용해 본 적이 없기 때문입니다.

저는 모듈 폴더를 만들었고, 그 안에 Company라는 모듈용 폴더가 하나 있습니다.회사 폴더 내에 다음 파일 action.js, getters.js, index.js, mutoriations.js를 작성했습니다.

이 파일 내의 코드는 다음과 같습니다.

action.syslog:

import api from '@/vuex/utils/api'

const getCompanies = (context) => {
    api.get('/57/companies').then(response => {
        context.commit('GET_COMPANIES', response)
    }).catch((error) => {
        console.log(error)
    })
}

export default {
    getCompanies
}

메모: Import한 API 내에서 기본 조작 메서드를 만들었습니다(get, post, delete 등).

getters.getters:

const allCompanies = state => state.companies

export default {
    allCompanies
}

modiations.modiations:

const GET_COMPANIES = (state, companies) => {
    state.companies = companies
}

export default {
  GET_COMPANIES
}

index.syslog:

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

const state = {
  companies: []
}

export default {
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}

이 모듈을 만든 후 다음과 같이 스토어에 추가했습니다.

store.syslog:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    company: companyModule
  }
})

export default store

주의: main.js 파일 내의 이 스토어를 사용하도록 vue 앱에 지시했습니다.

이를 테스트하기 위해 심플한 HelloWorld 컴포넌트를 만들었습니다.심플한 html 테이블 안에 데이터를 로드하려고 했습니다.여기에 문제가 나타났다.마운트된 후크 내부에서 getCompanies라는 액션을 디스패치하여 테이블 내의 데이터를 볼 수 있지만 개발 콘솔 내부에서 다음과 같은 오류가 발생합니다.

vuex.esm.js?358c:417 [vuex]알 수 없는 액션유형: getCompanies

HelloWorld 컴포넌트 코드:

import { mapGetters } from 'vuex'

...
 
computed: {
    ...mapGetters({
        companies: 'company/allCompanies'
     })
}

...

mounted () {
    this.$store.dispatch('company/getCompanies')
}

...

데이터가 내 저장소에 있습니다. vue devtools의 스크린샷을 확인하십시오.

이 에러는 왜 콘솔에 표시되는지, 뭔가 부족한 것이 있는지, 그리고 그 에러에 어떻게 대응하고 있는지 묻고 싶습니다.감사합니다!

이것을 시험해 보세요.

import { mapGetters,  mapActions} from 'vuex'

computed: {
  ...mapGetters({
    companies: 'company/allCompanies'
  })
}

methods: {
  ...mapActions(['company/getCompanies', 'company/getEmployees'])
},

mounted() {
  this['company/getCompanies']();
},

단, 아래와 같이 네임스페이스 처리를 하고 싶은데 문제가 있으니 여기를 참고하세요.

methods: {
  ...mapActions('company', ['getCompanies', 'getEmployees'])
},

mounted() {
  this.getCompanies();
  this.getEmployees();
},

다음 방법으로 해결할 수 있습니다.

this.$store.dispatch('company/getCompanies', null, {root:true})

또한 사용mapActions컴포넌트에서의 메서드

store.js에서 모듈을 사용할 때는 주의해서 사용해야 합니다.

export const namespaced = true

그리고 아니다

export const namespaces = true

모듈/foo.filename 파일 안에 있습니다.보기 흉한 오타!

namesthed: true를 삭제하고 다시 시도하십시오.

언급URL : https://stackoverflow.com/questions/53163508/vue-vuex-unknown-action-type