vuex unknown local mutation type: updateValue, global type: app/updateValue. Mutations don't work

Question

I want to apply mutations through actions to a variable in my vuejs application. But I get this error saying [vuex] unknown local mutation type: updateValue, global type: app/updateValue

Here is my store folder structure:

-store
    -modules
    -app
        -actions.js
        -getters.js
        -mutations.js
        -state.js
    -index.js
    -actions.js
    -getters.js
    -mutations.js
    -state.js
    -index.js

This is my ./store/index.js file:

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

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

Vue.use(Vuex)

const store = new Vuex.Store({
    namespaced: true,
    actions,
    getters,
    modules,
    mutations,
    state
})

export default store

This is my ./store/modules/index.js:

const requireModule = require.context('.', true, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    if (fileName === './index.js') return

    // Replace ./ and .js
    const path = fileName.replace(/(\.\/|\.js)/g, '')
    const [moduleName, imported] = path.split('/')

        if (!modules[moduleName]) {
            modules[moduleName] = {
            namespaced: true
        }
    }

    modules[moduleName][imported] = requireModule(fileName).default
})

export default modules

This is my ./store/modules/app/actions.js:

export const updateValue = ({commit}, payload) => {
    commit('updateValue', payload)
}

This is my ./store/modules/app/getters.js:

export const value = state => {
    return state.wruValue;
}

This is my ./store/modules/app/mutations.js:

import { set, toggle } from '@/utils/vuex'

export default {
    setDrawer: set('drawer'),
    setImage: set('image'),
    setColor: set('color'),
    toggleDrawer: toggle('drawer')
}

export const updateValue = (state, payload) => {
    state.wruValue = payload * 12;
}

This is my ./store/modules/app/state.js:

export default {
    drawer: null,
    color: 'green',
    wruValues:1,
    wruValue: 1,
}

and finally this is my vue component:

<v-btn @click="updateValue(10)">
    SHOW
</v-btn>

import { mapActions } from 'vuex';
...mapActions ('app',[
                'updateValue'
            ]),

So when I click on the button I expect to see the wruValue to change (I print the value somewhere else for testing purposes) but instead I get the error mentioned above. What's wrong with my code?

Answer 1

commit('updateValue', payload, {root: true})

But I find your use of namespacing odd. For my projects, I don't separate out files for getters, actions, etc, I separate out tasks, projects, companies, etc. But if it works for you, that's fine. It doesn't seem like the issue. If you still get an error, you might need to change "updateValue" to "mutations/updateValue" or something.