Vuex: Help: unknown mutation type: products/openDialog

[Chalkin]

I'm traying to figure out how to work with namespaced modules in vuex. But I always get the error "unknown mutation type: products/openDialog" when I try to do a commit in my vuejs instance "this.$store.commit('products/openDialog');" and when I try to call a getter inside my computed property I get undefined "this.$store.getters['products/getDialogOpen']"

store/index.js

import Vuex from 'vuex'

import products from './modules/products';
import manufacturers from './modules/manufacturers';

const store = new Vuex.Store({
  modules: {
    products
  },
  strict: process.env.NODE_ENV !== 'production'
});

export default store;

store/modules/products.js

...
const state = {
  items: [],
  dialogOpen: false
};

const mutations = {
  closeDialog() {
    state.dialogOpen = false;
  },
  openDialog() {
    state.dialogOpen = true;
  }
};
...
const getters = {
  getDialogOpen: state => {
    return state.dialogOpen;
  },
...
};

export default {
  namespaced: true,
  state,
  mutations,
  getters,
  actions
}

Vue Instance

...
computed: {
   showDialog: {
       return this.$store.getters['products/getDialogOpen'];
   }
},

....
methods: {
   onClose() {
        this.$store.commit('products/closeDialog');
   }
}

[LinusBorg]

Hello @Chalkin,

thank you for your filing this issue.

Please follow the guidelines on how to report an issue. In particular, provide an example on www.jsfiddle.net (or a similar service) that reproduces the problem. If necessary, create a repository for us to clone with a minimal reproduction. repositories of actual projects will generally not be accepted.

Also, this is not a support forum for usage questions. We have a dedicated forum or this: forum.vuejs.org

[samueledirito]

@Chalkin, same problem here. And I think it's not a Vuex issue but some missing point in documentation.
The only way global dispatching is working for me is to call this.$store.commit(`${namespace}/${mutation}`, payload, { root: true }).

I'm sure this is not the correct way. Hope someone helps.

[ktsn]

@samueledirito If it is the case, it is a bug because the root store (this.$store in components) should not process root: true option.
I could not reproduce this problem. It would be appreciated if you can provide any live reproduction.

[Chalkin]

@samueledirito It was the vuex version. Mine was still 2.0.0 and with the 2.1.2 it now works fine with for example $store.commit('counter/incrementMe').
I updated both, vue and vuex

[AnswerYas]

@Chalkin are you resolve this problem. the same problem to me.

[willypt]

@AnswerYas yes, he is.
Please open a new issue via https://new-issue.vuejs.org/?repo=vuejs/vuex

[begueradj]

It should work if you declare namespaced: true in store/index.js:

import Vuex from 'vuex'

import products from './modules/products';
import manufacturers from './modules/manufacturers';

const store = new Vuex.Store({
  namespaced: true, // Add this here
  modules: {
    products
  },
  strict: process.env.NODE_ENV !== 'production'
});

export default store;

Billal Begueradj

[shawnolson-fp]

I think you mean namespaced - https://vuex.vuejs.org/guide/modules.html#namespacing

I've confirmed this working with Vuex version 3.0.1