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

目录

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'
methods: {
...mapActions([
'setcachemid'
]),
transfromPage(row, path) {
this.setcachemid(row.monitorId) // [vuex] unknown action type: setcachemid
}
}



看dataManage.js并没什么错误呀!

纠结,

发现dispatch得使用这种才行

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

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

最后调用代码改改


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

ok问题解决,其实也是粗心开

index.js中模块加载modules[moduleName] = value.default 就知道

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

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



【纠错】

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



他是允许在多模块时传入namespace参数来指定获取那个模块下的action 的

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

之所以能成功,

关键在于这个normalizeMap

state的定义

在定义state 时将所有其子模块都通过getNestedState绑定到了state 中上

,然在dispatch时就可以通过对应的val 找到

最终正确写法应该是

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

[vuex] unknown action type:***的更多相关文章

  1. vuex2 mapActions 报错 `unknown action type: xxxx`

    export const setBreadCrumb = ({ dispatch }, data) => { dispatch('SET_BREADCRUMB', data) } 当调用的时候报 ...

  2. 解决vuex 状态管理mutations报错为:"[vuex] unknown mutation type: VIWE_NAV"

    报错截图: 我的解决思路: 1.先检查gettes方向获取与actions提交是否畅通,同时专注检查code是否输错. 2.我查了别人多数是""在vuex中没有mutation,有 ...

  3. mint17.3挂载u盘出现错误:mount:unknown filesystem type 'exfat'

    mint17.3挂载u盘出现错误:mount:unknown filesystem type 'exfat' 安装exfat-fuse: sudo apt-get install exfat-fuse

  4. mount: unknown filesystem type 'ntfs'

    mount: unknown filesystem type 'ntfs' 问题描述 # mount –t ntfs /dev/sdc1 /mnt/usb2 mount: unknown filesy ...

  5. 在linux终端执行clear或top命令时出现:'xterm' unknown terminal type的错误

    例如: [root@localhost phpmyadmin]# clear 'xterm': unknown terminal type. 解决办法: 1.临时办法,下次启动失效,需要重新执行 ex ...

  6. scp使用加密算法报错unknown cipher type

    为了提高scp的传输速度指定了scp的加密算法为arcfour $ scp -c arcfour localFile userName@remoteIP:remoteFile 得到报错unknown ...

  7. [virsh] error: unknown OS type hvm解决办法

    今天在linux服务器上编译安装升级了下qemu,升级命令如下: root@ubuntu:/opt/qemu-# ./configure --prefix=/usr/local/ --target-l ...

  8. CentOS提示::unknown filesystem type 'ntfs'.解决

    在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下面按照遇到的问题,按照正确的方式注意操作从而避免问 ...

  9. mount: unknown filesystem type 'LVM2_member'解决方案

    系统启动到request_module: runaway loop modprobe binfmt-464c挂起 利用U盘系统,挂载硬盘出现:mount: unknown filesystem typ ...

  10. 'vt100': unknown terminal type.

    在Linux终端执行clear或top命令时出现:vt100: unknown terminal type的错误 1.临时办法,下次启动失效,需要重新执行 执行以下命令 $ printenv | gr ...

随机推荐

  1. [网鼎杯 2018]Fakebook

    1.解题过程 1.sql注入 访问web页面有一个login和join ![1](https://raw.githubusercontent.com/lanchuangdexingjian/Blog- ...

  2. java网络编程--4 UDP

    java网络编程--4 UDP 1.7.UDP 发短信:不用连接,但是需要知道对方的地址 主要包含两个类:DatagramPacket 和 DatagramSocket 发送消息 发送端: packa ...

  3. CentOS 7下安装windows字体

    1.在日常生产中打开文件时发现中文乱码,考虑到编码或者是否有中文字体库,在CentOS 7中执行命令发现字体列表命令无效. 上图发现字体库都没安装,接下来就会简单说一下CentOS 7 中安装字体库和 ...

  4. Hadoop 安装及目录结构

    一.准备工作 [1]创建用户:useradd 用户名[2]配置创建的用户具有 root权限,修改 /etc/sudoers 文件,找到下面一行,在root下面添加一行,如下所示:(注意:需要先给sud ...

  5. fluter usage---->动态更换Theme

    应用中切换深色主题和暗色主题是比较常见的操作,今天我们就来学习一下Flutter中动态的切换主题. Simple Theme import 'package:flutter/material.dart ...

  6. 更优雅的OrientDB Java API

    OrientDB API v1.0.0(OrientDB 3.x) Gitee OrientDB介绍 OrientDB是一个开源的NoSQL数据库管理系统,同时也是一款高性能的图数据库,支持ACID事 ...

  7. uniApp安卓离线SDK运行

    一.下载uniapp提供的离线SDK包 下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android 版本:2022年09月26日 ...

  8. 快速部署Ceph分布式高可用集群

    快速部署Ceph分布式高可用集群 Ceph简介 Ceph是一个PB,EB级别的分布式存储系统,可以提供文件存储,对象存储.和块存储,它可靠性高,易扩展,管理简便,其中对象存储和块存储可以和其他云平台集 ...

  9. mesql输入中文报错

    错误提示:ERROR 1366 (HY000): Incorrect string value: '\xE6\x9D\x8E\xE5\x8B\x87' for column 'Sname' at ro ...

  10. flask快速上手

    看完这2个基本可以起步flask了 一学习 https://www.codingdict.com/article/4884 二实战 https://blog.miguelgrinberg.com/po ...