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 没有找到突变,但它被定义了

Vuex,Nuxt:未知的动作类型

Vuex mapstate 对象未定义和“[vuex] 未知突变类型:”

Vue.js/Vuex 登录:[vuex] 未知操作类型:postLogin。

尝试从 Vuex 模块调度操作不起作用。 [vuex] 未知动作类型

注册模块中的vuex未知突变类型