반응형
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
반응형
'programing' 카테고리의 다른 글
| FD_CLOEXEC fcntl() 플래그의 기능은 무엇입니까? (0) | 2022.08.27 |
|---|---|
| Java에서 Atomic Reference를 사용하는 경우 (0) | 2022.08.27 |
| Git 버전 해시를 C코드로 자동 출력하려면 어떻게 해야 하나요? (0) | 2022.08.27 |
| v-bind 상태:스타일. (0) | 2022.08.25 |
| vue 템플릿에서 const를 사용하려면 어떻게 해야 합니까? (0) | 2022.08.25 |