时间戳

首页 > 解决方案 > vuex 未知本地变异类型：updateValue，全局类型：app/updateValue。突变不起作用

vue.js - vuex 未知本地变异类型：updateValue，全局类型：app/updateValue。突变不起作用

问题描述

我想通过操作将突变应用于我的 vuejs 应用程序中的变量。但我得到这个错误说[vuex] unknown local mutation type: updateValue, global type: app/updateValue

这是我的商店文件夹结构：

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

这是我的./store/index.js文件：

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

这是我的./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

这是我的./store/modules/app/actions.js： 

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

这是我的./store/modules/app/getters.js： 

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

这是我的./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;
}

这是我的./store/modules/app/state.js： 

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

最后这是我的 vue 组件：

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

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

因此，当我单击按钮时，我希望看到wruValue更改（我在其他地方打印值以进行测试），但我得到了上面提到的错误。我的代码有什么问题？

标签： vue.jsactionvuexstoremutation

解决方案

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

但我发现你对命名空间的使用很奇怪。对于我的项目，我不会分离出 getter、action 等文件，而是分离出任务、项目、公司等。但如果它适合你，那很好。这似乎不是问题。如果您仍然收到错误，您可能需要将“updateValue”更改为“mutations/updateValue”或其他内容。

推荐阅读