programing

vuejs 2.0 구성 요소가 모듈 vuex에서 작업 메서드에 액세스하지 못했습니다.

prostudy 2022. 8. 27. 08:46
반응형

vuejs 2.0 구성 요소가 모듈 vuex에서 작업 메서드에 액세스하지 못했습니다.

모듈 설계를 사용하여 Vuejs 2.0 및 Vuex를 테스트하고 있지만 컴포넌트가 액션 방법에 액세스할 수 없습니다.

내 컴포넌트:

import {mapGetters, mapActions} from 'vuex'

export default {
  computed: mapGetters({ 
    clients: 'clients',
    fields: 'fields'
  }),
  methods: mapActions({ 
    init: 'init'
  }),
  created: () => {
    console.log(this.init)
  }
}

my my module:

const state = {
    'fields': [
        {
          'field': 'name',
          'label': 'Nom'
        },
        {
          'field': 'adresse',
          'label': 'Adresse'
        },
        {
          'field': 'amount',
          'label': 'Amount'
        },
        {
          'field': 'contact',
          'label': 'Contact'
        }
    ],
    items : []
}

export const SET_CLIENTS = 'SET_CLIENTS'

const mutations = {
    [SET_CLIENTS] (state, clients) {
      state.items = clients;
    }
}

const actions = {
    init: ({ commit }, payload) => {
        let clients = []
        for(let i = 0; i < 100; i++){
            clients.push({
                'name': 'Client '+i,
                'adresse': '14000 Caen',
                'amount': '1000',
                'contact': 'contact@client'+i+'.com'
            })
        }
        commit(SET_CLIENTS, { clients })
    }
}

const getters = {
    clients (state) {
        return state.items;
    },
    fields (state) {
        return state.fields;
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}

스토어 생성:

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

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    clients,
    filters
  }
})

모든 프로젝트 코드는 다음 URL에서 확인할 수 있습니다.https://github.com/robynico/vuejs-2.0-modules

테스트하면 컴포넌트 작성 시 init 메서드가 정의되어 있지 않음을 알 수 있습니다.

잘 부탁드립니다!

스토어 모듈을 잘못 수출하고 있는 것 같습니다.이것을 시험해 보세요.

사용자 내부module.js:

export default {
  state: {},  // define your state here
  getter: {},  // define your getters here
  actions: {}, // define your actions here
  mutations: {} // define your mutations here
}

다음으로 매장 내:

import Vue from 'vue'
import Vuex from 'vuex'

import module from './modules/module.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    module // your moudle
  }
})

export default store

언급URL : https://stackoverflow.com/questions/39589225/vuejs-2-0-components-failed-to-access-action-methods-with-module-vuex

반응형