vuex: unbekannt Getter: user

Question

Ich bin mit vuex experimentiert und ich war auf der Suche für die beste Weg, um meine vuex Dateien, die ich mit so etwas wie dies fertig zu organisieren:

/src/store/user/state.js:

export default { 
    state: { 
    user: null 
    } 
} 

/src/store/user/getters.js:

export default { 
    getters: { 
    user (state) { 
     return state.user 
    } 
    } 
} 

/src/store/user/mutations.js:

export default { 
    mutations: { 
    'SET_USER' (state, user) { 
     state.user = user 
    } 
    } 
} 

/src/store/user/actions.js

export default { 
    actions: { 
    loginUser ({ commit }, params) { 
     commit('SET_USER', {id: 1}) 
    } 
    } 
} 

/src/store/user/index.js

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

export default { 
    state, 
    getters, 
    actions, 
    mutations 
} 

/src/store/index.js:

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

Vue.use(Vuex) 

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

Wenn ich meinen Code laden, wird in der Konsole folgender Fehler zurückgegeben:

vuex: unknown getter: user 

exportiert, getters usw.

also im Rahmen der

Answer 1

Jeder Ihrer benutzerbezogenen Dateien verwenden export default, was bedeutet, wenn Sie diese Dateien importieren, können Sie das gesamte Objekt zu benennen, die state Variable hat eine Eigenschaft mit dem Namen state, die getters Variable hat eine Eigenschaft mit dem Namen getters, usw. Und das wirft Dinge weg.

Sie sollten eine const für jede dieser Dateien exportieren statt:

export const state = { 
    user: null, 
} 

Und dann, wenn die Namen const wie so Import greifen:

import { state } from './state' 

---

Alternativ können Sie einfach entfernen die Eigenschaften für state, getters usw. aus jeder Datei:

// state.js 
export default { 
    user: null, 
} 

Und dann, wie Sie importieren tue schon:

import state from './state'