CODEWITHSUNDEEP
javascriptvue.jsvuex
Aleksej_Shherbak
Aleksej_Shherbak

Reputation: 3078

Why namespased: false does not work for me

I have seen similar questions. But I lose something and can't understand why it does not work in my case. I have the following vuex module: 

const root = {
    namespaced: false,
    state: {
        advertisersOptions: [],
        customersTypesOptions: [],
       // ... more state props are here ...
    },
    mutations: {
        setIsChoiceAllApps(state, isChoiceAllApps) {
            state.isChoiceAllApps = isChoiceAllApps;
        },

       // and so on 
    },
    getters: {
        getErrorMessages: state => {
            return state.errorMessages;
        },
        // and so on
    },
    actions: {},
};

export default root

I create my store like:

import Vue from 'vue'
import * as Vuex from 'vuex'
import root from './modules/root'

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
         root
    }
});

And I include it into the app.js file:

const app = new Vue({
    el: '#app',
    store,
    components: {
        Multiselect
    },
});

So, I would like to see my vuex properties after ...mapState(['...']). I will show you the component: 

export default {
    data() {
        return {
            choiceAllApplications: false
        }
    },
    methods: {
        ...mapActions(['updateApplicationsAction']),
        disposeAllApps: function () {
            this.$store.commit("setApplications", []);
        },
    },
    computed: {
        ...mapState([
            "advertisersOptions",
            "advertisersSelected",
            // and so on are here
        ]),
    },

As you can see I use namespaced: false,. I just want to see my properties in the global scope. But it does not work. I will make console.log inside the mounted() and this is the dump:

enter image description here

As you can see module name (root) is here. I forgot something?

Upvotes: 0

Views: 45

Answers (1)

Alex Brohshtut
Alex Brohshtut

Reputation: 2060

You didn't forgot anything, it is always like this - as per Vuex docs, only getters, setters and actions are subject to be namespaced (and, btw, even then they are namespaces, they will still be present in global object but be like moduleName/action - user/getUserName and not inside objects like user.getUserName).

However state is always per module - so, not matter namespaced or not it will sit in it's own property in the global state object.

Upvotes: 1

Related Questions