欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex unknown action type報錯問題及解決

 更新時間:2023年02月12日 13:52:34   作者:wo_dxj  
這篇文章主要介紹了Vuex unknown action type報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Vuex unknown action type報錯

在項目中使用到vuex,因為都是用的模塊開發(fā),目錄如下

模塊代碼

原來使用代碼

各種查找問題都不好使,完了再方法之前加上模塊名稱就ok了

vuex unknown action type:***

vuex 分模塊后使用mapActions調(diào)用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
}

頁面中調(diào)用時

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

看dataManage.js并沒什么錯誤呀!

糾結(jié),

發(fā)現(xiàn)dispatch得使用這種才行

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

看到這個是否明白了些什么!

最后調(diào)用代碼改改

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

ok問題解決,其實也是粗心開

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

為根據(jù)模塊名稱為每個modules 加了一個key ,

訪問當(dāng)然也要到改對應(yīng)的模塊名下去找了

【糾錯】

后來乘空閑去看了看源碼,感覺上面最后一步的操作時錯誤的

他是允許在多模塊時傳入namespace參數(shù)來指定獲取那個模塊下的action 的

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

之所以能成功,

關(guān)鍵在于這個normalizeMap

state的定義

在定義state 時將所有其子模塊都通過getNestedState綁定到了state 中上,然在dispatch時就可以通過對應(yīng)的val 找到

看這個源碼里的方法還是很繞的,還是不清楚,那么就搞個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 應(yīng)該會執(zhí)行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
			 * 此似高階函數(shù)用法
			 * 他返回了一個匿名函數(shù)給調(diào)用者
			 * 如 const mapActions 得到的其實就是這個里面return (namespace, map) => 這個匿名函數(shù)
			 * 而在定義 const mapActions = normalizeNamespace((namespace, actions) => {}) 時又
			 * 傳入了一個匿名函數(shù)(namespace, actions) => {}作為參數(shù)給normalizeNamespace這個方法,所以在
			 * mapActions({
				  'cacc': 'dataManage/setcachemid'
				})
				時; 其中執(zhí)行的就是這個函數(shù)return返回的(namespace, map) => {}這個匿名函數(shù)
				然而這個匿名函數(shù)執(zhí)行時內(nèi)部又將mapActions定義是傳入的fn執(zhí)行并返回
			 */
			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)
			// 模仿執(zhí)行handler 執(zhí)行actions
			console.log(resarr.cacc())
		</script>
	</body>
</html>

F12查看打印如下:

好了轉(zhuǎn)半天應(yīng)該稍微理解一些了

而最終正確寫法應(yīng)該是

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

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue引用外部JS并調(diào)用JS文件中的方法實例

    vue引用外部JS并調(diào)用JS文件中的方法實例

    我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • element-ui table組件如何使用render屬性的實現(xiàn)

    element-ui table組件如何使用render屬性的實現(xiàn)

    這篇文章主要介紹了element-ui table組件如何使用render屬性的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • Vue組件實現(xiàn)觸底判斷

    Vue組件實現(xiàn)觸底判斷

    這篇文章主要為大家詳細(xì)介紹了Vue組件實現(xiàn)觸底判斷,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • Vue.js 中的 $watch使用方法

    Vue.js 中的 $watch使用方法

    本篇文章中主要介紹了Vue.js 中的 $watch使用方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • Vue實現(xiàn)瀏覽器端掃碼功能

    Vue實現(xiàn)瀏覽器端掃碼功能

    本文主要介紹,通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù),在瀏覽器端調(diào)起攝像頭,并進(jìn)行掃碼識別功能,對識別到的二維碼進(jìn)行跳轉(zhuǎn)或其他操作處理,對vue瀏覽器掃碼功能的實現(xiàn)代碼感興趣的朋友一起看看吧
    2021-10-10
  • SpringBoot+Vue3實現(xiàn)上傳文件功能

    SpringBoot+Vue3實現(xiàn)上傳文件功能

    這篇文章主要介紹了SpringBoot+Vue3實現(xiàn)上傳文件功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-01-01
  • vue使用ECharts實現(xiàn)折線圖和餅圖

    vue使用ECharts實現(xiàn)折線圖和餅圖

    這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實現(xiàn)折線圖和餅圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue+Node.js+WebSocket實現(xiàn)即時通訊

    Vue+Node.js+WebSocket實現(xiàn)即時通訊

    本文主要介紹了Vue+Node.js+WebSocket實現(xiàn)即時通訊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • VUE的history模式下除了index外其他路由404報錯解決辦法

    VUE的history模式下除了index外其他路由404報錯解決辦法

    在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報錯解決辦法,對此有需要的朋友們可以學(xué)習(xí)下。
    2019-08-08
  • 利用Vue Native構(gòu)建移動應(yīng)用的全過程記錄

    利用Vue Native構(gòu)建移動應(yīng)用的全過程記錄

    VueNative是一個使用JavaScript構(gòu)建跨平臺原生移動應(yīng)用程序的框架m這篇文章主要給大家介紹了關(guān)于如何利用Vue Native構(gòu)建移動應(yīng)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2021-08-08

最新評論