使用vuex出现commit未定义错误如何解决
导读:本文共2659.5字符,通常情况下阅读需要9分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 使用vuex的时候出现commit未定义错误出现的原因书写错误当然,这个错误不是你单词书写错误只要的原因是因为你的这个 方法里面没有 commit 这个方法为什么没有?其实它是有的,只不过在 context 里面你可能是直接写 commit(xxx)了错误展现过程首先我们先调用一下<div><inputtype="button&quo... ...
目录
(为您整理了一些要点),点击可以直达。使用vuex的时候出现commit未定义错误
出现的原因
书写错误
当然,这个错误不是你单词书写错误
只要的原因是因为你的这个 方法里面没有 commit 这个方法
为什么没有?其实它是有的,只不过在 context 里面
你可能是直接写 commit(xxx)了
错误展现过程
首先我们先调用一下
<div><inputtype="button"@click="$store.dispatch('listMore')"value="加载更多"></div>
为什么是 dispatch ,因为你不是用 commit 了吗?
这个就是在 actions 里面调用 mutations 里面的方法的
然后就是代码:
actions={login(context){commit("CHANGE_USERNAME")}}};
可以看到接受了一个参数,这个参数是它默认传的,你不能改变
commit 在 context 里面,但是你是直接写
正确调用的话可以这样来写:
actions={login(context){context.commit("CHANGE_USERNAME")}}};
或者这样:
actions={login({commit}){//加{}commit("CHANGE_USERNAME")}}};
vuex模块化 commit()时报错 unknown mutation type:xxx
废话不多说直接上问题
我写了两个组件,准备练习Vuex的模块化
这是Count模块(计数作用)的js
increment方法触发后,由于逻辑十分简单我就直接给到了mutations
让他加
methods:{increment(){this.$store.commit("INCREMENT",this.n);},decrement(){this.$store.commit("DECREMENT",this.n);},incrementOdd(){this.$store.dispatch("incrementOdd",this.n);},incrementWait(){this.$store.dispatch("incrementWait",this.n);},},
mutations:{//加INCREMENT(state,value){state.sum+=value;},//减DECREMENT(state,value){state.sum-=value;}},state:{sum:0,bigSum:0,},
这是Person模块(添加人员作用)的js
add方法触发后将信息封装成对象直接给到mutations,然后一个unshift新增即可
methods:{add(){constpersonObj={id:nanoid(),name:this.name};console.log(this.$store);this.$store.commit("ADD_PERSON",personObj);this.name="";},},
mutations:{ADD_PERSON(state,personObj){state.personList.unshift(personObj);},},
然后这是storejs
importVuefrom'vue'//引用vueximportVuexfrom'vuex';//使用vuexVue.use(Vuex)importCountOptionsfrom'./count';importPersonOptionsfrom'./person';//创建并暴露storeexportdefaultnewVuex.Store({modules:{countAbout:CountOptions,personAbout:PersonOptions,}})
就这样,run起来后,
触发increment(数字+) ==> 成功
触发add(加一个人) ==> unknown mutation type:ADD_PERSON
于是我把$store捞出来,找到_mutations
发现我的添加人员的add指向的的mutation 外面包了一层,
完事我将这一层加上去,成功实现,
然后我将Count的加上countAbout反而报错
那么问题来了,为啥我两个模块的写法是一样,然后调用的模块的情况也是一样的(count.vue==>count模块,person.vue==>person模块),一个包了一个没包,于是我怀疑是引入顺序的问题,觉得第一个引入的模块不包,于是我将模块的引入,声明甚至组件的顺序都调换了顺序,然而并没有什么软用。。。
于是我写了一个临时的test模块。分别copy Count,Person模块的js,
然后我以为是命名的问题,因为我的两个模块的命名一个有下划线,一个没有下划线,于是:
发现并不是
于是我有写了两个测试模块 test demo
发现除了count,其他都包了
最后发现是我的count的开启命名空间namespaced的d忘了写
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
使用vuex出现commit未定义错误如何解决的详细内容,希望对您有所帮助,信息来源于网络。