2016-09-20 10 views
3

私は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) 
    } 
} 

私のモジュール:

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': '[email protected]'+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 
    } 
}) 

すべてのプロジェクトコードはこちらです:https://github.com/robynico/vuejs-2.0-modules

これをテストすると、コンポーネントの作成時にinitメソッドが未定義になっていることがわかります。

ありがとうございます!

+0

あなたは*とはどういう意味ですかはアクションメソッドにアクセスすることはできませんか*?どのようにアクセスしたいですか? –

答えて

2

私はあなたの店のモジュールを間違って輸出していると思います。あなたの店内に続いて

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

:あなたのmodule.jsインサイド

:これを試してみてください

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 
+0

何も変更されません。私はすでにそれをしていたので、質問にストア作成コードを追加しました。 thx – robynico

+0

あなたの質問を更新することはできますか?あなたがあなたの行動を呼び出す方法や、あなたが得ているエラーを見ることができないからです –

関連する問題