bencodezen / vue-enterprise-boilerplate

An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
7.77k stars 1.32k forks source link

Can't use CreateNamespacedHelpers with the automatic module registration #162

Closed handhikadj closed 4 years ago

handhikadj commented 5 years ago

I'm using this code for the automatic module registration on the index.js

const requireModule = require.context(".", false, /\.js$/); //extract js files inside modules folder
const modules = {};

requireModule.keys().forEach(fileName => {
    if (fileName === "./index.js") return; //reject the index.js file

    const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, "")); //
    modules[moduleName] = requireModule(fileName).default;
});
export default modules;

and it works fine. now i'm using your index.js and it gives me unknown getter and unknown local action type. How I declare it on a component?

this is my component script

<script>
import { createNamespacedHelpers } from "vuex";

const { mapActions } = createNamespacedHelpers("dashboardAdminUpperPanels");

export default {
    mounted() {
        this.loadUpperPanelsAction();
    },
    methods: {
        ...mapActions(["loadUpperPanelsAction"])
    }
};

this is my state dashboardAdminUpperPanels.js

import Axios from "axios";

export default {
    // namespaced: true,
    state: {
        a: null,

    },
    actions: {
        loadUpperPanelsAction({ commit }) {
            Axios.get("/ajax")
                .then(response =>
                    commit("loadInitMutations", response.data.data)
                )
                .catch(errors => alert("Server Error"));
        }
    },
    mutations: {
        loadInitMutations: (state, payloadLoadUpperPanelsAction) => {
            state.a= payloadLoadUpperPanelsAction.a;

        }
    },
    getters: {
        getA: state => state.a,  
    }
};

And how do I use it within folders? e.g

--store
----modules
------dashboardAdmin
--------panels.js // this will be automatically registered
------index.js
chrisvfritz commented 4 years ago

I don't recommend using Vuex helpers directly within components, but instead registering all helpers in src/state/helpers.js. You can learn more in these docs.