[vuex] unknown action type:***

ゝ一世哀愁。 2023-02-13 04:57 125阅读 0赞

> vuex 分模块后使用mapActions调用action老是提示 \[vuex\] unknown action type:\*\*\* 异常

目录  
![在这里插入图片描述][20200527151954368.png]

**index.js**是这样的

import Vue from 'vue'
    	import Vuex from 'vuex'
    	import getters from './getters'
    	
    	Vue.use(Vuex)
    	
    	const modulesFiles = require.context('./modules', true, /\.js$/)
    	
    	const modules = modulesFiles.keys().reduce((modules, modulePath) => { 
    	  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    	  const value = modulesFiles(modulePath)
    	  modules[moduleName] = value.default
    	  return modules
    	}, { })
    	
    	const store = new Vuex.Store({ 
    	  modules,
    	  getters
    	})
    	
    	export default store

**dataManage.js** 模块定义是这样的

const state = { 
      mId: '',
      basicId: ''
    }
    const mutations = { 
      SET_MID(state, mId) { 
        state.mId = mId
      },
      SET_BASIC_ID(state, basicId) { 
        state.basicId = basicId
      }
    }
    const actions = { 
      setcachemid({  commit }, mId) { 
        console.log(mId)
        commit('SET_MID', mId)
      },
      setBasicId({  commit }, basicId) { 
        commit('SET_BASIC_ID', basicId)
      }
    }
    export default { 
      namespaced: true,
      state,
      mutations,
      actions
    }

页面中调用时

import {  mapActions } from 'vuex'
       computed: { 
        ...mapActions([
          'setcachemid'
        ]),
        transfromPage(row, path) { 
       		this.setcachemid(row.monitorId) // [vuex] unknown action type: setcachemid
       }
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]  
看dataManage.js并没什么错误呀！

纠结，

发现dispatch得使用这种才行

this.$store.dispatch('dataManage/setcachemid', row.monitorId)

看到这个是否明白了些什么！

最后调用代码改改

import {  mapActions } from 'vuex'
       computed: { 
        ...mapActions({ 
          'cacc': 'dataManage/setcachemid'
        }),
        transfromPage(row, path) { 
       		  this.cacc(row.monitorId)
       }
     }

ok问题解决，其实也是粗心开  
index.js中模块加载`modules[moduleName] = value.default` 就知道

为根据模块名称为每个modules 加了一个key ,

访问当然也要到改对应的模块名下去找了

--------------------

【纠错】

后来乘空闲去看了看源码，感觉上面最后一步的操作时错误的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]  
他是允许在多模块时传入`namespace`参数来指定获取那个模块下的action 的

而

...mapActions({ 
          'cacc': 'dataManage/setcachemid'
        }),

之所以能成功，

关键在于这个`normalizeMap`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]

和`state`的定义![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]  
在定义state 时将所有其子模块都通过`getNestedState`绑定到了state 中上  
，然在`dispatch`时就可以通过对应的val 找到  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]

--------------------

看这个源码里的方法还是很绕的，还是不清楚，那么就搞个html理一理

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>理一理vue mapaction</title>
    	</head>
    	<body>
    		<script>
    			const mapActions = normalizeNamespace((namespace, actions) => { 
    			  const res = { }
    			  normalizeMap(actions).forEach(({  key, val }) => { 
    			    res[key] = function mappedAction (...args) { 
    					// 这里val 不为function 应该会执行dispatch.apply(this.$store, [val].concat(args))
    					// 这里就不模仿了，直接将concat值返回
    					//return typeof val === 'function'
    					// ? val.apply(this, [dispatch].concat(args))
    					// : dispatch.apply(this.$store, [val].concat(args))
    			      return [val].concat(args)
    			    }
    			  })
    			  return res
    			})
    			/** * @param {Object} fn * 此似高阶函数用法 * 他返回了一个匿名函数给调用者 * 如 const mapActions 得到的其实就是这个里面return (namespace, map) => 这个匿名函数 * 而在定义 const mapActions = normalizeNamespace((namespace, actions) => {}) 时又 * 传入了一个匿名函数(namespace, actions) => {}作为参数给normalizeNamespace这个方法，所以在 * mapActions({ 'cacc': 'dataManage/setcachemid' }) 时； 其中执行的就是这个函数return返回的(namespace, map) => {}这个匿名函数 然而这个匿名函数执行时内部又将mapActions定义是传入的fn执行并返回 */
    			function normalizeNamespace (fn) { 
    			  return (namespace, map) => { 
    			    if (typeof namespace !== 'string') { 
    			      map = namespace
    			      namespace = ''
    			    } else if (namespace.charAt(namespace.length - 1) !== '/') { 
    			      namespace += '/'
    			    }
    			    return fn(namespace, map)
    			  }
    			}
    			/** * Normalize the map * normalizeMap([1, 2, 3]) => [ { key: 1, val: 1 }, { key: 2, val: 2 }, { key: 3, val: 3 } ] * normalizeMap({a: 1, b: 2, c: 3}) => [ { key: 'a', val: 1 }, { key: 'b', val: 2 }, { key: 'c', val: 3 } ] * @param {Array|Object} map * @return {Object} */
    			function normalizeMap (map) { 
    			  return Array.isArray(map)
    			    ? map.map(key => ({  key, val: key }))
    			    : Object.keys(map).map(key => ({  key, val: map[key] }))
    			}
    			
    			// 测试一哈
    			console.log(mapActions)
    			
    			let resarr = mapActions({ 
    			  'cacc': 'dataManage/setcachemid'
    			})				
    			console.log(resarr)
    			// 模仿执行handler 执行actions
    			console.log(resarr.cacc())
    		</script>
    	</body>
    </html>

F12查看打印如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 5]

好了转半天应该稍微理解一些了

而最终正确写法应该是

...mapActions('dataManage', { 
          'cacc': 'setcachemid'
        }),

[20200527151954368.png]: https://img-blog.csdnimg.cn/20200527151954368.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527151912516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200601141826155.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200601150416325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200601142122562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200601150832145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200718222722469.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70