vuex2中使用mapMutations/mapActions/mapGetters报错解决方法

最新推荐文章于 2024-07-04 15:39:39 发布
最新推荐文章于 2024-07-04 15:39:39 发布
阅读量4.7k 收藏 2
点赞数 1
分类专栏： WeeX 文章标签： vuex2 mapMutations mapActions mapGetters
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangteng22/article/details/76573555
版权

在使用vuex2时，发现vuex2增加了 mapGetters和 mapActions的方法，借助stage2的 Object Rest Operator特性,可以写出下面代码： 

methods: {
  marked,
  ...mapActions([
    'getArticles'
  ])
}

但是在借助babel编译转换时发生了报错： BabelLoaderError: SyntaxError: Unexpected token。

解决方案

在vuex的repo issues中有人提过这样的问题，原来是我babel预置的转换器是 babel-preset-es2015，并不能转换 Object Rest Operator特性。

解决方法很简单了，可以安装整个stage2的预置器或者安装 Object Rest Operator的babel插件 babel-plugin-transform-object-rest-spread

package.json的devDependencies增加配置：


"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",

执行npm install 安装上面的插件，

然后打开文件：.babelrc

输入以下内容：

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}
重新build错误解决

Ztw2017
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex模块(modules)中触发不了mutations问题---[vuex] module namespace not found in mapMutations(): cartStore/
温情
04-02 1628
报错信息 store/modules/cartStore.js const cartStore = { namespace: true, state: { num: localStorage.getItem('cartNum') || 1, }, getters: {}, mutations: { setNum(state) { state.num++; localStorage.set
vuex2中使用mapGetters/mapActions报错的解决方法
12-11
解决方案 可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread 。 接着在babel的配置文件 .babelrc 中应用插件： { "presets": [ ["es2015", { ...
vuex2中使用mapGetters/mapActions报错解决方法
九州县令的博客
08-19 603
解决方法很简单了，可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件。接着在babel的配置文件。
Vue88-Vuex中的mapActions、mapMutations
最新发布
qq_31532983的博客
07-04 186
Vuex中的mapActions、mapMutations的调用
webpack打包 vuex ...mapMutations ，...mapGetters报错解决
hanxue_tyc的博客
08-05 3231
在开发vue项目中使用vuex 的 …mapMutations等语法时webpack打包发生错误 Unexpected token，解决办法： 先安装： cnpm install –save-dev babel-plugin-transform-object-rest-spread 安装成功后： 在项目根目录新建.babelrc，（如果存在，修改内容） 放入下面内容: { “pres
Vue中mapMutations映射方法的问题
weixin_30877755的博客
05-05 463
今天又被自己给蠢到，找了半天没发现问题。大家看下代码。 mutation-types.js 里我新增了一个类型。INIT_CURRENTORDER export const GET_USERINFO = 'GET_USERINFO' export const OUT_LOGIN = 'OUT_LOGIN' export const GET_ORDER = 'GET_OR...
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
08-27
使用这些概念，Vuex提供了`mapState`、`mapGetters`、`mapActions`和`mapMutations`辅助函数，它们帮助开发者便捷地在组件中绑定和调用这些状态和方法。例如，`mapState`可以让组件直接绑定到store中的状态，而`...
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
08-27
Vuex 中的 MapState、MapGetters、MapMutations、MapActions 的作用详解 Vuex 是一个状态管理模式，用于帮助开发者更好地管理应用程序中的状态。Vuex 中提供了多种方式来帮助开发者管理状态，其中包括 MapState、...
vuex-demo:vuex中mapState、mapGetters、mapActions、mapMutations的使用
05-02
在实际项目中，`vuex-demo-master`可能包含一个简单的Vuex配置示例，展示如何定义state、getters、actions和mutations，以及如何在组件中使用`map*`辅助函数。这些辅助函数大大简化了代码，提高了可读性和可维护性。...
vuex中的babel编译mapGetters/mapActions报错解决方法
xdongll的专栏
07-04 9599
在尝鲜vuex2时，发现vuex2增加了 mapGetters 和 mapActions 的方法，借助stage2的 Object Rest Operator 特性,可以写出下面代码： methods: { marked, …mapActions([ ‘getArticles’ ]) } 但是在借助babel编译转换时发生了报错： BabelLoaderError:
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
YY的博客
12-09 381
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
mapMutations m
weixin_34310369的博客
06-13 74
mapMutations //触发store里面mutation的add方法，但是这样写不够简洁明了 <button @click="$store.commit('add',1)">+</button>mutation methods: { ...mapMutations([ 'add', 'reduce'...
vuex：弄懂mapState、mapGetters、mapMutations、mapActions
u010227042的博客
06-17 1737
vuex进阶 一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //存放状态 nickname:'Simba', age:20, gender:'男' }, mutations: {},
vuex的使用之mapMutations
weixin_44794123的博客
07-05 9363
vuex中mapMutations的使用。
...mapMutations的使用
zhiyun_li1的博客
04-23 9314
1、在es6中更新了…拓展运算的写法： 首先我们要先知道三个点是什么意思…；简单点理解可以讲三个点看成就是省略号，省略号表示有些东西被隐藏了，用省略号就是表示这个对象是可以展开的，所以三个点ES6中也定义为扩展运算符或者展开运算符。 2、下面以示例介绍： 首先在vuex定义： export default new Vuex.Store({ state: { // 展示数据 detail: {}, }, mutations: { //方法名字自定义（） changeDetail(state
【vue】Slot总结
loyd3的博客
09-05 337
什么是slot 当需要让组件组合使用，混合父组件的内容与子组件的模板时，就回用到slot，这个过程叫内容分发 props传递数据，events触发事件和slot内容分发构成了vue组件的3个api来源 如下例： <child-component> {{message}} </child-component> 这里的message就是一个slot，但是它绑定的是父组件的数据，而不是<child-component>的数据 父组件模板的内容是在父组件作用域内编译， 子组件
mapMutations的用法
qq_38475255的博客
11-01 675
也可以使用mapMutations语法糖，例如。在组件中，调用Mutations函数，使用。
Vuex学习之-- 在组件中提交 Mutation
fengyjch
01-08 2726
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。 其中  import语句为语法糖 import { mapMutations } from 'vuex' export default { //
vuex里面的辅助函数mapState,mapGetters,mapMutations和mapActions用法
07-10
mapState: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的状态值。它接受一个数组或对象作为参数，用于指定我们想要映射的状态。当我们在组件中使用这个辅助函数时，它会返回一个计算属性对象，其中包含了我们所需的状态值。 例如，假设我们有一个名为`count`的状态值，我们可以使用`mapState`辅助函数将其映射到组件中： ```javascript import { mapState } from 'vuex'; export default { computed: { ...mapState(['count']) } } ``` 现在，在组件中我们就可以直接使用`count`这个计算属性来访问 Vuex store 中的`count`状态值。 mapGetters: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 getter 方法。它跟`mapState`的用法类似，接受一个数组或对象作为参数，用于指定我们想要映射的 getter 方法。同样，它也返回一个计算属性对象。 例如，假设我们有一个名为`doubleCount`的 getter 方法，我们可以使用`mapGetters`辅助函数将其映射到组件中： ```javascript import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['doubleCount']) } } ``` 现在，在组件中我们就可以直接使用`doubleCount`这个计算属性来访问 Vuex store 中的`doubleCount` getter 方法的返回值。 mapMutations: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 mutation 方法。它也接受一个数组或对象作为参数，用于指定我们想要映射的 mutation 方法。不同于`mapState`和`mapGetters`，`mapMutations`返回的是一个对象，其中包含了我们所需的 mutation 方法。 例如，假设我们有一个名为`increment`的 mutation 方法，我们可以使用`mapMutations`辅助函数将其映射到组件中： ```javascript import { mapMutations } from 'vuex'; export default { methods: { ...mapMutations(['increment']) } } ``` 现在，在组件中我们就可以直接调用`increment`方法来触发 Vuex store 中的`increment` mutation。 mapActions: 这个辅助函数可以帮助我们在组件中映射 Vuex store 中的 action 方法。它同样接受一个数组或对象作为参数，用于指定我们想要映射的 action 方法。类似于`mapMutations`，`mapActions`返回的也是一个对象，其中包含了我们所需的 action 方法。 例如，假设我们有一个名为`fetchData`的 action 方法，我们可以使用`mapActions`辅助函数将其映射到组件中： ```javascript import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['fetchData']) } } ``` 现在，在组件中我们就可以直接调用`fetchData`方法来触发 Vuex store 中的`fetchData` action。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值