Vue.js vuex未知局部突变类型：updateValue，全局类型：app/updateValue。突变不'；行不通

我想通过操作将突变应用到vuejs应用程序中的变量。但我得到的错误是：未知的局部突变类型：updateValue，全局类型：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文件：

从“Vue”导入Vue
从“Vuex”导入Vuex
从“/actions”导入操作
从“/getter”导入getter
从“./modules”导入模块
从“./突变”导入突变
从“./状态”导入状态
Vue.use（Vuex）
const store=新的Vuex.store({
名称空间：对，
行动，
获得者，
模块，
突变，
状态
})
导出默认存储

这是我的/store/modules/index.js：

const requireModule=require.context（'.'，true，/\.js$/）
常量模块={}
requireModule.keys（）.forEach（文件名=>{
if（fileName=='./index.js'）返回
//替换./and.js
const path=fileName.replace（/（\.\/\.js）/g'，）
常量[moduleName，已导入]=path.split（“/”）
if（！modules[moduleName]）{
模块[moduleName]={
名称空间：true
}
}
模块[moduleName][imported]=requireModule（文件名）。默认值
})
导出默认模块

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

export const updateValue=（{commit}，有效负载）=>{
提交（'updateValue'，有效负载）
}

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

export const value=state=>{
返回状态.wruValue；
}

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

从'@/utils/vuex'导入{set，toggle}
导出默认值{
setDrawer:set（'drawer'），
setImage:set（'image'），
setColor:set（'color'），
toggleDrawer:toggle（'drawer'）
}
导出常量updateValue=（状态、有效负载）=>{
state.wruValue=有效载荷*12；
}

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

导出默认值{
出票人：空，
颜色：“绿色”，
WRU值：1，
净值：1，
}

最后，这是我的vue组件：

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

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

显示
从“vuex”导入{mapActions}；
…映射操作（'应用'[
“updateValue”
]),

因此，当我点击按钮时，我希望看到

wruValue

发生变化（为了测试目的，我在其他地方打印了该值），但是我得到了上面提到的错误。我的代码怎么了

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

---

但我觉得你使用名称空间很奇怪。对于我的项目，我不会为getter、action等分离文件，我会分离任务、项目、公司等。但是如果它对您有效，那就好了。这似乎不是问题所在。如果仍然出现错误，可能需要将“updateValue”更改为“Translations/updateValue”或其他内容。

您应该使用此项目结构：

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

src/store/modules/app.js

导出常量状态={
出票人：空，
颜色：“绿色”，
WRU值：1，
净值：1
}
导出常量突变={
更新_值：（状态，有效负载）=>{
state.wruValue=有效负载*12
}
}
导出常量操作={
updateValue:（{commit}，有效负载）=>{
提交（“更新值”，有效负载）
}
}
导出常量getter={
getWruValue：（state）=>state.wruValue
}

src/store/index.js

从“Vue”导入Vue
从“Vuex”导入Vuex
Vue.use（Vuex）
const requireContext=require.context（'./modules'，true，/.*\.js$/）
const modules=requireContext.keys（）
.map（文件=>
[file.replace（/（^.\/）|（\.js$）/g'，）requireContext（文件）]
)
.reduce（（模块，[名称，模块]）=>{
if（module.namespaced==未定义）{
module.namespaced=true
}
返回{…模块，[名称]：模块}
}, {})
导出默认的新Vuex.Store({
模块
})

src/main.js

从“Vue”导入Vue
从“./App.vue”导入应用程序
从“./路由器”导入路由器
从“./store/”导入存储
Vue.config.productionTip=false
新Vue({
路由器，
商店，
渲染：h=>h（应用程序）
}).$mount（“#应用程序”）

src/App.vue

显示
从“vuex”导入{mapActions}
导出默认值{
方法：{
…映射操作（'app'，['updateValue']））
}
}

---

然后，如果你想添加一个新的存储名称空间，你需要把它放在src/modules文件夹中。

它在方法中。忘了将它复制到此处我不相信您可以为最顶层的存储命名：

const store=new Vuex.store（{namespaced:true，//…etc

（在您的./store/index.js文件中）。

namespace

属性仅为模块保留。