精华内容
下载资源
问答
  • vuex mapActions

    2019-10-19 17:41:11
    在组件中使用 this.$store.dispatch('xxx')分发 action,或者使用 mapActions辅助函数将组件的 methods 映射为 store.dispatch...

    在组件中使用 

    this.$store.dispatch('xxx')
     分发 action,或者使用 
    mapActions
     辅助函数将组件的 methods 映射为 
    store.dispatch
     调用(需要先在根节点注入 
    store
    ).

    import Vue from 'vue';
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App';
    import router from './router';
    import Vuex from 'vuex';
    
    Vue.config.productionTip = false;
    Vue.use(Vuex);
    Vue.use(Element)
    
    //vuex的配置
    //注意Store是大写
    const store = new Vuex.Store({
        //数据保存
        state: {
            show: false,
            count: 0,
            list: [1, 5, 8, 10, 30, 50]
        },
        mutations: {
            increase(state, n = 1) {
                state.count  = n;
            },
            decrease(state, n = 1) {
                state.count -= n;
            },
            switch_dialog(state) { // 这里的state对应着上面这个state
                state.show = state.show ? false : true
                // 你还可以在这里执行其他的操作改变state
            }
        },
        getters: {
            filteredList: state => {
                return state.list.filter(item => item < 31);
            }
        },
        actions: {
            asyncDecrease({commit }) {
                commit('decrease',5);
            },
            switch_dialog123(context) { // 这里的context和我们使用的$store拥有相同的对象和方法
                context.commit('switch_dialog')
                // 你还可以在这里触发其他的mutations方法
            }
        }
    });
    
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        //使用vuex
        store: store,
        render: h => h(App),
    });
    <template>
        <div>
            {{count}}
            <button @click="handleIncrease"> 5</button>
            <button @click="handleDecrease">-5</button>
            <button @click="handleAsyncDecrease">异步-5</button>
            <button @click="handleRouter">跳转到 HelloWorld3</button>
            <button @click="showRouter">展示路由</button>
        </div>
    </template>
    
    <script>
        import { mapState } from 'vuex'
        import { mapGetters } from 'vuex'
        import { mapMutations } from 'vuex'
        import { mapActions } from 'vuex'
        export default {
            name: 'HelloWorld2',
            computed: {
                //            count(){
                //                return this.$store.state.count;
                //            },
                //            filteredList() {
                //                return this.$store.getters.filteredList;
                //            },
                ...mapState({
                    count: state => state.count
                }),
                // 使用对象展开运算符将 getter 混入 computed 对象中
                ...mapGetters([
                    'filteredList'
                ])
            },
            methods: {
                handleIncrease() {
                    //                this.$store.commit('increase', 5);
                    this.increase();
                },
                handleDecrease() {
                    this.$store.commit('decrease', 5);
                },
                handleAsyncDecrease() {
                    //调用方式一
                    //                this.$store.dispatch('asyncDecrease');
                    //调用方式二
                    this.asyncDecrease()
                },
                handleRouter() {
                    this.$router.push('/HelloWorld3');
                },
                showRouter() {
                    console.log(this.$router);
                    console.log(this.$router.push);
                },
                //mapMutations 使用方法一
                //            ...mapMutations([
                //                'increase', // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
                //            ]),
                //mapMutations 使用方法二
                ...mapMutations({
                    increase: 'increase' // 将 `this.increase()` 映射为 `this.$store.commit('increase')`
                }),
                //mapActions 使用方法一
                //            ...mapActions([
                //                'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
                //            ]),
                //mapActions 使用方法二
                ...mapActions({
                    asyncDecrease: 'asyncDecrease' // 将 `this.asyncDecrease()` 映射为 `this.$store.dispatch('asyncDecrease')`
                }),
            }
        };
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • 主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以参考下
  • 要点: 这节课我们来优化一下这边的内容 ...这边commit是要与mutations进行联系的所以引入的就是mapMutations ...mapActions 可替代掉dispatch 与之前类似 数组形式也一样 ...

    要点:

     

     

    这节课我们来优化一下这边的内容 

     

     这边commit是要与mutations进行联系的所以引入的就是mapMutations

    这边直接这样写就相当于没有定义参数

     

    所以我们要在模板上的方法里写入参数

     

    数组形式与之前的mapGetters和mapState相同

    记得前面数组也要改

     

    mapActions

    可替代掉dispatch

    与之前类似

     

    数组形式也一样

     

     

     

     

     

    展开全文
  • 在vuex中有四大金刚分别是State, Mutations,Actions,Getters,本文对这四大金刚做了详细介绍,本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用,感兴趣的朋友一起看看吧
  • 06-vuex基础-mapActions(辅助函数)——通过mapActions函数可以生成methods中函数 网址:https://vuex.vuejs.org/zh/api/#mapactions mapActions辅助函数,把actions中的函数映射组件methods中 通俗:通过...

    06-vuex基础-mapActions(辅助函数)——通过mapActions函数可以生成methods中函数

    网址:https://vuex.vuejs.org/zh/api/#mapactions

    • mapActions辅助函数,把actions中的函数映射组件methods中
    • 通俗:通过mapActions函数可以生成methods中函数
    // 在methods中申明了一个函数getCount,执行的代码是:this.$store.dispatch('getData')
        ...mapActions({ getCount: 'getData' }),
        // 在methods中申明了一个函数getDataByParams({ num: 9999 }),执行的代码是:this.$store.dispatch('getDataByParams', { num: 9999 })
        ...mapActions(['getDataByParams']),
    

    使用方法:

    在使用组价com-a.vue中操作

    第一步:把methods中的getData方法进行删除

    第二步:在script标签里进行引入 选中的辅助函数 的方法

    第三步:在div盒子里进行点击事件绑定,传入参数

    在这里插入图片描述

    第四步:在methodes中进行定义方法

    在这里插入图片描述

    第五步:显示页面,验证结果

    在这里插入图片描述

    展开全文
  • vuex中mapActions用法详解

    千次阅读 2019-12-29 15:34:20
    一般而言,我们使用this.$store.dispatch('...从而更加简便的方式出现了,他就是mapActionsmapActions就是将组件中的事件函数映射为对应的action,其中事件函数名称与action名称应该是一样的,写法如下: mapAct...

    一般而言,我们使用this.$store.dispatch('xxx')来触发action操作,有多少action需要被触发,就需要写多少个this.$store.dispatch('')方法;

    从而更加简便的方式出现了,他就是mapActions,mapActions就是将组件中的事件函数映射为对应的action,其中事件函数名称与action名称应该是一样的,写法如下:

     

    mapActions:(['increament','decreament']),其中increament,decreament是事件函数名称与action名称。这样就不用写多个this.$store.dispatch('')语句了。

     

    map简单理解为分发。dispatch也是分发的意思。如何分发?通过映射!如何映射?通过同名事件函数与action。

     
    展开全文
  • mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要,这个映射直接映射到...所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~ 用例 ...
  • vuex中mapState和mapActions

    2021-08-12 16:41:35
    当有多个modules时 ...import { mapState, mapActions } from 'vuex' 这样就可以直接通过this.state获取出project模块中的state computed: { ...mapState('project', { state: state => state }) },
  • vuex actions module mapActions
  • nodejs-- vuex中mapActions

    2019-03-14 09:51:00
    mapActions() 返回的是一个对象, 用了 ... 扩展符后,才可以放进一个对象里,和其他组件内定义的 method 在同一个 methods 对象。 { methods: mapActions() // 如果没有其它组件内的定义的方法,可以这样写}{ ...
  • vuex-demo vuex中mapState、mapGetters、mapActions、mapMutations的使用
  • VUEX中mapActions和mapMutations使用方法

    千次阅读 2020-05-06 18:01:02
    分享一个vuex的小知识: 使用vuex,修改状态用commit,或者dispatch,如this.$store.commit('user/age', 10) ...也可以使用mapActions和mapMutations进行映射, 使用方法: ...mapActions({ stateChange: 'user/upd...
  • vuex 中关于 mapActions 的作用

    万次阅读 2017-10-07 22:39:00
    mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中。和 mapState、mapGetters 也类似,只不过它映射的地方不是计算属性,而是组件的 methods 对象上。我们来直接看它的实现: export ...
  • mapActions mapActions 必须放在 methods中,因为 action 或者 mutation 都是方法. 文件中导入 import { mapActions } from 'vuex'; export default { // ... methods: { //下述中的 ... 是拓展运算符 // ...
  • import {mapActions} from ‘vuex’ 第二部在methods 中引用 …mapActions([‘setKeyWords’,‘setLogoUrl’,‘setUserInfo’]) 这样就可以把 this.$store.dispatch(‘incrementBy’, amount)` 简洁为 this....
  • Vuex的辅助函数mapState, mapActions, mapMutations用法
  • vue3.0下如何使用mapState,mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用 vue2.0中使用mapState及mapActions的方式 // 使用mapState ...
  • vuex2增加了mapGetters和mapActions的方法,借助stage2的Object Rest Operator 所在通过 methods:{ ...mapActions([ 'increment' ]) } 酱紫去拿到action。但是我们需要安装babel-preset-stage-2的依赖。 ...
  • 在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 this.$store.commit('mutaion-name','参数') ...所以,vue提供了mapActions和mapMutations 。两者使用方法相似,下面以mapActions为例。 一、引入ma...
  • vuex---mapGetters和mapActions

    千次阅读 2018-12-10 21:53:43
    若有多个getter时,可用.........mapActions([ ])同理; 这样写可以简化代码; 具体用法如下: // productListOne.vue中 &lt;script&gt; import {mapGetters} from 'vuex' import {mapActions...
  • 点击这里,vue之…mapActions的使用
  • mapActions Dispatching Actions in Components You can dispatch actions in components withthis.$store.dispatch('xxx'), or use themapActionshelper which maps component methods tostore.dispatchcalls ...
  • 向...mapActions('login')里传参数

    千次阅读 2019-03-02 00:15:21
    怎么向...mapActions('login')里传参数? 1、可以直接用 dispatch是可以的 this.$store.dispatch(types.Login, {reqData:userData, reqTime: timeData}) 2、用mapActions的话怎么像里面传参数到actions里请求...
  • 理解Vuex的辅助函数mapState, mapActions, mapMutations用法
  • 说白了mapState,mapGetters,mapMutations,mapActions 其实就是对state,gettters,mutations,actions的重命名而已。 1.mapState 他是对state的对象进行二次计算,他可以简化我们代码,这样我们获取cartList,不用写...
  • 在尝鲜vuex2时,发现vuex2增加了 mapGetters 和 mapActions 的方法,借助stage2的 Object Rest Operator 特性,可以写出下面代码: methods: { marked, …mapActions([ ‘getArticles’ ]) } 但是在借助babel...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,615
精华内容 3,046
关键字:

mapactions