vuex 未知本地变异类型:updateValue,全局类型:app/updateValue。突变不起作用
Posted
技术标签:
【中文标题】vuex 未知本地变异类型:updateValue,全局类型:app/updateValue。突变不起作用【英文标题】:vuex unknown local mutation type: updateValue, global type: app/updateValue. Mutations don't work 【发布时间】:2019-12-08 08:34:15 【问题描述】:我想通过操作将突变应用到我的 vuejs 应用程序中的变量。但是我收到这个错误说[vuex] unknown local mutation type: updateValue, global type: app/updateValue
这是我的 store 文件夹结构:
-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
发生更改(出于测试目的,我将值打印在其他地方),但我得到了上面提到的错误。我的代码有什么问题?
【问题讨论】:
我不相信您可以命名最顶层的商店:const store = new Vuex.Store( namespaced: true, //... etc
(在您的 ./store/index.js 文件中)。 namespace
属性仅供模块使用。
【参考方案1】:
commit('updateValue', payload, root: true)
但我发现您对命名空间的使用很奇怪。对于我的项目,我不会分离出 getter、动作等文件,而是分离出任务、项目、公司等。但如果它适合你,那很好。这似乎不是问题。如果您仍然收到错误,您可能需要将“updateValue”更改为“mutations/updateValue”或其他内容。
【讨论】:
【参考方案2】:你应该使用这个项目结构:
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>
如果你想添加一个新的 store 命名空间,你需要把它放在 src/modules 文件夹中。
【讨论】:
它在方法内部。忘记在这里复制了以上是关于vuex 未知本地变异类型:updateValue,全局类型:app/updateValue。突变不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Vuex mapstate 对象未定义和“[vuex] 未知突变类型:”
Vue.js/Vuex 登录:[vuex] 未知操作类型:postLogin。