Блог

Я начал использовать Vuex и, поскольку в store.js нем стало тесно, добавил модули.
Состояние и средства получения моих модулей выглядят нормально в Vue Tools, когда я проверяю хранилище Vuex, но все средства получения и состояния базового хранилища являются такими undefined , и я, похоже, не могу сказать почему. Я импортирую базовое хранилище как import store from '../store/store' в app.js файле. Есть идеи о том, что я здесь делаю не так?

мое базовое хранилище выглядит следующим образом:

store.js

 import Vuex from 'vuex';
import Vue from 'vue';
import axios from "axios";
import { users } from './users-store';

Vue.use(Vuex);

const initialState = () => ({
    state: {
        letters: null,
        names: false,
    },
});

const state = initialState();

const getters = {
    getLetters(state) {
        return state.letters;
    },
    getNames(state) {
        return state.names;
    },
    
};

const mutations = {
    setLetters: (state,payload) => {
        state.letters = payload;
    },
    setNames: (state,payload) => {
        state.names = payload;
    },
};

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules: {
        users
    },
});
  

users-store.js

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

Vue.use(Vuex);

const initialState = () => ({
    userName: null,
    userAge: 50
});

const state = initialState();

const mutations = {
    setUserName: (state,payload) => {
        state.userName = payload;
    },
    setUserAge: (state,payload) => {
        state.userAge = payload;
    },

};

const getters = {
    getUserName(state) {
        return state.userName;
    },
    getUserAge(state) {
        return state.userAge;
    },
};


export const users = {
    namespaced: true,
    state,
    mutations,
    getters,
    actions,
};
  

Обычно я делаю это точно так же, как в документах для модульного хранилища:

Пожалуйста, обратите внимание на комментарии

store/index.js :

 import Vue from 'vue'
import Vuex from 'Vuex'
import ModuleA from './modules/module-a.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {}, // with object, not a function returning object
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    ModuleA,
  },
})

export default store
  

store/modules/module-a.js :

 const ModuleA = {
  state: () => ({}), // a function for this one
  getters: {},
  mutations: {},
  actions: {}
}

export default ModuleA // and I use default export instead of named export
  

И это отлично работает.

Обратите внимание, что для этого я использую последние версии Vue и Vuex.