精华内容
下载资源
问答
  • 在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 this.$store.commit('mutaion-name','参数') 或者 this.$store.dispatch('actions-name','参数') 上述两种方法即可。 但是,当项目中的 mutation...

    在项目中,经常使用到VUEX状态管理,对于小项目中,直接使用 

    this.$store.commit('mutaion-name','参数') 

    或者  

    this.$store.dispatch('actions-name','参数')

    上述两种方法即可。

    但是,当项目中的 mutation 或者 action 过多的时候,这样一个个的写就显得比较麻烦。

    所以,vue提供了 mapActions和mapMutations 。两者使用方法相似,下面以 mapActions为例。

    一、引入 mapActions 

    import { mapActions } from 'vuex'

    二、进行解构赋值和拓展运算

    export default {
      // ...
      methods: {
           //下述中的 ... 是拓展运算符
           // 使用 [] 是解构赋值
        ...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    
          // `mapActions` 也支持载荷:
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
        ]),
        ...mapActions({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
      }
    }

    解析:

    1. mapActions 必须放在 methods中,因为 action 或者  mutation 都是方法.

    2. mapAction 里面事store 里面的集合,所以使用ES6中解构赋值的方法进行获取我们所需的方法

    3. mapAction 前面的 ( ... ) 是ES6中 拓展运算符,对我们所需的方法从数组中拓展出来。

    4. ES6对象中同名属性可以简写。

    5. 也可以自己命名不同函数名来映射 action方法

    展开全文
  • 通常,我们在vuex的actions中定义一个方法: export default { vuexSetUserLogin({commit, state}){ commit("vuex_set_user_login", 111); }, vuexSetTest({commit}, val){ commit(&quot...

    通常,我们在vuex的actions中定义一个方法:

    export default {
        vuexSetUserLogin({commit, state}){
            commit("vuex_set_user_login", 111);
        },
        vuexSetTest({commit}, val){
            commit("vuex_set_test", val);
        }
    }
    

    调用时这样调用:

    this.$store.dispatch("vuexSetTest", "ttttttt");
    

    mapActions的作用就是,把actions中的方法映射到methods中,换一种调用方式。

    引入mapAction:

    import {mapActions,} from 'vuex'
    

    映射方法:

    "methods": {
        ...mapActions([
            "vuexSetUserLogin",
            "vuexSetTest"
        ]),
    },
    

    调用方法:

    this.vuexSetTest("eeee");
    
    展开全文
  • mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中。和 mapState、mapGetters 也类似,只不过它映射的地方不是计算属性,而是组件的 methods 对象上。我们来直接看它的实现: export ...

      mapActions 工具函数会将 store 中的 dispatch 方法映射到组件的 methods 中。和 mapState、mapGetters 也类似,只不过它映射的地方不是计算属性,而是组件的 methods 对象上。我们来直接看它的实现:

    export function mapActions (actions) {
    	const res = {}
    	normalizeMap(actions).forEach(({ key, val }) => {
    		res[key] = function mappedAction (...args) {
    			return this.$store.dispatch.apply(this.$store, [val].concat(args))
    		}
    	})
    	return res
    }
    

      可以看到,函数的实现套路和 mapState、mapGetters 差不多,甚至更简单一些,实际上就是做了一层函数包装。为了更直观地理解,我们来看一个简单的例子:

    import { mapActions } from 'vuex'
    export default {
    	// ...
    	methods: {
    		...mapActions([
    			'increment' // 映射 this.increment() 到 this.$store.dispatch('increment')
    		]),
    		...mapActions({
    			add: 'increment' // 映射 this.add() to this.$store.dispatch('increment')
    		})
    	}
    }
    

      经过 mapActions 函数调用后的结果,如下所示:

    import { mapActions } from 'vuex'
    export default {
    	// ...
    	methods: {
    		increment(...args) {
    			return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
    		}
    		add(...args) {
    			return this.$store.dispatch.apply(this.$store, ['increment'].concat(args))
    		}
    	}
    }
    

    .

    转载于:https://www.cnblogs.com/crazycode2/p/7636086.html

    展开全文
  • import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { msg:"Hello Vuex!", name:"cxj", age:18, hobby:"美女" }, getters: { tenYearsOld(state){ return state.age + 1

    store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        msg:"Hello Vuex!",
        name:"cxj",
        age:18,
        hobby:"美女"
      },
      getters: {
        tenYearsOld(state){
          return state.age + 10;
        },
      },
      mutations: {
        changeMsg(state,payload){
          console.log("changeMsg mutations");
          state.msg = payload;
        }
      },
      actions: {
        getMsg({commit},msg){
          console.log("changeMsg actions");
          setTimeout(() => {
            commit("changeMsg",msg)
          }, 2000);
        }
      },
      modules: {
      }
    })
    

    App.vue

    <template>
      <div id="app">
        {{msg}}
        <hr />
        <button @click="asyncChangeMsg">点我改变msg-async</button>
        <br />
        <button @click="masyncChangeMsg('Hello vuex! mapActions')">点我改变msg-async-mapActions</button>
      </div>
    </template>
    
    <script>
    import { mapState, mapActions } from "vuex";
    
    /*
    Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态(避免异步带来的状态混乱);Action 可以包
    含任意异步操作。
    
    在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 
    store.dispatch 调用(需要先在根节点注入 store)
    */
    export default {
      name: "App",
      components: {},
      computed: {
        ...mapState(["msg", "name", "age"])
      },
      methods: {
        ...mapActions({
          masyncChangeMsg: "getMsg"
        }),
        asyncChangeMsg() {
          this.$store.dispatch("getMsg", "Hello vuex! dispatch");
        }
      }
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    效果截图-dispatch

    效果截图-mapActions

    展开全文
  • 主要介绍了vuex2中使用mapGetters/mapActions报错解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vuex使用mapActions

    2019-04-16 09:15:46
    在store.js书写actions方法 actions: { demo({ commit }, options) { return new Promise((resolve, reject) => { ajax.post({ url: "xxxxxxxxxxx/... ...mapActions(["demo"]), xxx }
  • 参考文档:https://vuex.vuejs.org/zh/guide/ actions功能与mutations相近,区别主要有以下两...如果我们把state、getters、mutations和actions一股脑全部定义在一个文件里,会导致Vuex的定义文件非常臃肿,因此在下面
  • VUEXmapActions和mapMutations使用方法

    千次阅读 2020-05-06 18:01:02
    分享一个vuex的小知识: 使用vuex,修改状态用commit,或者dispatch,如this.$store.commit('user/age', 10) this.$store.dispatch('user/age', 10) 也可以使用mapActions和mapMutations进行映射, 使用方法: ......
  • 前段时间看了vuex,久了不用了,又有些生疏了TT 目录结构 需求:A组件和B组件共同管理一个goodsList数组,A组件往数组里push数据,B组件循环显示数组中的数据 (1)在index.js新建goodsList (2)在getter....
  • 关于vuex的…mapActions、 …mapState、…mapMutations和…mapGetters的理解 背景: mapState、mapGetters、mapMutations、mapActions他们返回的都是一个对象,而vue的methods、computed也是一个对象。在js中...
  • 先来看看我们常规使用 vuex 的步骤: // store.js 定义 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, }, mutations: { increase(state...
  • Vuex使用笔记 store/index.js // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // export default new Vuex.Store({ export const store = new Vuex.Store({ state: { ...
  • 1. 问题mapActions如何传递自定义参数 <template> <div class="footer"> <p><button @click="reduce(num2)">3.子组件的按钮(vuex)</button></p> </div> </template...
  • vuex2增加了mapGetters和mapActions的方法,借助stage2的Object Rest Operator 所在通过 methods:{ ...mapActions([ 'increment' ]) } 酱紫去拿到action。但是我们需要安装babel-preset-stage-2的依赖。 ...
  • vuex mapActions

    2019-10-19 17:41:11
    在组件中使用 this.$store.dispatch('xxx')分发 action,或者使用 mapActions辅助函数将组件的 methods 映射为 store.dispatch...
  • vuex actions module mapActions
  • 本文章介绍vuex中辅助函数的使用,如果想学习vuex基础的小伙伴可以看上一篇文章~ 一、为什么需要使用辅助函数 当一个组件需要对多个状态进行操作的时候,代码会有些重复和冗余,我们可以使用辅助函数帮助我们用极少...
  • export const setBreadCrumb = ({ dispatch }, data) => { dispatch('SET_BREADCRUMB', data) ...当调用的时候报[vuex2] mapActions 报错 `unknown action type: setBreadCrumb`后台改成 export const setB...
  • 没有注释部分为使用…mapActions形式 <template> <div> <!--<button @click="medo()">点我</button>--> <button @click="clickme()">点我</button> </div> &...
  • mapActions ...import { mapActions } from 'vuex'; export default { // ... methods: { //下述中的 ... 是拓展运算符 // 使用 [] 是解构赋值 ...mapActions([ 'increment', // 将 `this.increment
  • vuex---mapGetters和mapActions

    千次阅读 2018-12-10 21:53:43
    若有多个getter时,可用...mapGetters([ ]),需要先export引入,且是es6语法,需要安装bable插件 ...mapActions([ ])同理; 这样写可以简化代码;...import {mapGetters} from 'vuex' import {mapActions...
  • vuex中有四大金刚分别是State, Mutations,Actions,Getters,本文对这四大金刚做了详细介绍,本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用,感兴趣的朋友一起看看吧
  • 因为在大多数的项目中,我们对于...像这样的情况我们就要考虑使用vuex中的modules模块化了,具体怎么使用modules呢?咱们继续一步一步的走: 首先,在store文件夹下面新建一个modules文件夹,然后在modules文件里...
  • vuexmapActions用法详解

    千次阅读 2019-12-29 15:34:20
    一般而言,我们使用this.$store.dispatch('...从而更加简便的方式出现了,他就是mapActionsmapActions就是将组件中的事件函数映射为对应的action,其中事件函数名称与action名称应该是一样的,写法如下: mapAct...
  • // } ) } } methods:{ ...mapActions(['dispatchAct']), } 1. 在actions中定义一个类型,处理异步函数 2. 在actions中获得异步结果之后,通过commit提交mutation,并将结果通过payload传递给mutation 3. 在...
  • 06-vuex基础-mapActions(辅助函数)——通过mapActions函数可以生成methods中函数 网址:https://vuex.vuejs.org/zh/api/#mapactions mapActions辅助函数,把actions中的函数映射组件methods中 通俗:通过...
  • 手把手教你使用vuex

    千次阅读 多人点赞 2019-11-21 00:07:49
    vuex 什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 可以理解为我们项目中需要共享的一些数据,我们把它集中管理起来的容器。把这些数据称为状态。比如一个用户的用户名,性别,权限级别等等。 ...
  • 第二步:安装Vuex环境npm install vuex –save,引入以下内容 import Vue from'vue' import Vuex from'vuex' import axiosfrom'axios' 第三步:将Vuex作为一个插件Vue.use(Vuex) 第四步:定义一个容器 let ...

空空如也

空空如也

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

mapactionsvuex

vue 订阅