关于vuex的mapActions引用老出问题

1.首先是版本问题,vue2对应的是vuex@3,vue3对应vuex@4,这个可以在package.json里面看

 "vue": "^2.5.2",
 "vue-router": "^3.0.1",
  "vuex": "^3.6.2"

如果版本对应不上的话要在对应项目内安装对应版本

2.其次就是main.js的引入和大小写问题

import store from './store/index';

在main.js里面引入store模块时不能写成Store,以及要在根组件中注册store

3.再而就是index.js中在引入Vuex时路径项要小写(或者说在哪个文件里引入vuex都要注意这个)

import Vuex from 'vuex' 

以及

export default new Vuex.Store({ 
    strict: process.env.NODE_ENV !== 'production', //在非生产环境下,使用严格模式
    modules: {
        user: user,
     
    } 
});

4.最后就是引入功能模块时路径一定要写对!!!!本人就是这个错的,一直显示找不到模块,上网查了一圈最后碰巧发现自己路径错了,导致一用mapActions就错

// 这里把moudle拼写错了找了两天
import user from './moudle/user'

最后的最后

store引入成功后,如果还是显示mutations或者actions里面functions is not defined 的话,还要看一下mutations和actions你是否加了s要不然确实会显示读不到(store的信息可以console.log(this.$store)在控制台里面读取具体信息,如果store都没有就要去找引入store的问题参考上面,如果是mutations或者actions没有的话就看这段文字看有没有对应的错误),以及如果你的...mapActions( {user:"user/方法"}),是这样用的话代表是将this.user()替换成this.$store.commit('方法'),也就是你得this.user(参数)才能用到具体方法,这里还需要注意actions里定义的方法名才是‘/’后面的方法名,关于mapActions的使用有很多种写法,有些是需要空间命名的有些不需要,具体是看有没有在功能模块(我这里是user.js)里面加namespaced: true。

本人新手一枚,发这个也是记录一下因为自己写代码马虎被毒打了想记录一下,如有不对请多包涵,也欢迎指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vuexmapActions是一个工具函数,它的作用是将store中的dispatch方法映射到组件的methods中。\[1\]这样做的好处是可以在组件中直接调用映射后的函数来触发对应的action。\[2\]使用mapActions的场景是当一个方法需要在多个页面和组件上使用时,可以通过mapActions来简化代码。\[1\]在组件中引入并调用mapActions,然后通过调用映射后的函数来触发对应的action。\[2\]相比于直接使用this.$store.dispatch()来触发action,使用mapActions可以更简洁地调用多个action。\[3\]只需要将需要触发的action函数名传入mapActions中,然后在组件中调用这些函数即可触发对应的action。 #### 引用[.reference_title] - *1* [Vue/Vuex (actions) 核心概念 使用方法、辅助函数 mapActions使用方法说明](https://blog.csdn.net/m0_64494670/article/details/127834964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vuexmapActions的概念及用法](https://blog.csdn.net/jiangjunyuan168/article/details/126962600)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值