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?

Laquitalar

I don't believe you can namespace the topmost store: const store = new Vuex.Store({ namespaced: true, //... etc (in your ./store/index.js file). The namespace property is reserved for modules only. – Tarr

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.

Vivianaviviane

Answer 2

You should use this project structure:

src/store/modules/app.js

export const state = {
  drawer: null,
  color: 'green',
  wruValues: 1,
  wruValue: 1
}

export const mutations = {
  UPDATE_VALUE: (state, payload) => {
    state.wruValue = payload * 12
  }
}

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

export const getters = {
  getWruValue: (state) => state.wruValue
}

src/store/index.js

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

Vue.use(Vuex)

const requireContext = require.context('./modules', true, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <button @click="updateValue(10)">
      SHOW
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('app', ['updateValue'])
  }
}
</script>

Then if you want to add a new store namespace, u need to put it inside of src/modules folder.

Shea

It is inside of methods. forgot to copy it here – Laquitalar