精华内容
下载资源
问答
  • vuex的actions的方法调用
    千次阅读
    2020-11-04 10:07:35
     //需要传入dispatch参数
     getSkuAttr({dispatch, commit}, goods) {
    		return api["goods/getSkuAttr"]({ 
                goods_id: goods.goods_id,
                sku:goods.sku,
            }).then(res => {
                //商品没有规格或者没有属性
    			if (res.data.data.attr_list.length == 0 && res.data.data.spc_info.sku_list.length == 0) {
                    dispatch('addCart', goods)
    			}else {
                    commit('getGoodsInfo', res.data.data)
                }
    		})
        },
        // 添加购物车
        addCart({dispatch, commit},goods) {
            let _param = {
                goods_id: goods.goods_id,
                goods_number: 1,
                sku:goods.sku
            }
            return api["cart/addCart"]({
                param: [JSON.stringify(_param)]
            }).then(res => {
                if (res.data.status === 10000) {
                    // 更新加入购物车数量
                    //购物车actions地址,传入的数据,是否在别的actions
                    dispatch('cart/setCartCount', res.data.count,{ root: true })
                    app.$toast.success({
                        message: app.$t("components.goodsList.addSuccess"),
                        duration: 1000
                    })
                } else if (res.data.status !== 10001 && res.data.status !== 10004){
                    app.$toast.fail({
                        message: app.$t("components.goodsList.addFail"),
                        duration: 1000
                    })
                }
            })
        }
    
    更多相关内容
  • vuex actions方法互相调用

    千次阅读 2021-07-20 10:03:34
    actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成 commit('gotOtherData', await ...
    // 假设 getData() 和 getOtherData() 返回的是 Promise
    
    actions: {
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }
    
    
    
    展开全文
  • 场景:在store里面多次调用删除某一个产品的方法,封装为一个删除全部选中的商品方法actions调用actions) context:小仓库 commit(提交mutations,修改state),getters(计算属性),dispatch(派发action),state...

    场景:在store里面多次调用删除某一个产品的方法,封装为一个删除全部选中的商品方法 (actions调用actions)
    context:小仓库 commit(提交mutations,修改state),getters(计算属性),dispatch(派发action),state(当前仓库数据)

    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

    在这里插入图片描述

    用promise.all([p1,p2,p3])
    p1|p2|p3每一个都是promise对象,如果有一个promise失败,都失败;如果都成功,返回结果成功。

    使用foreach遍历,每个item都派发删除一个项目的action,然后再dispatch这个action就行。

    在这里插入图片描述

    展开全文
  • 场景 在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions 但是在actions 只是可以接收到两个参数的...调用的时候 第二个参数传递成多个元素的对象这样在actions 中第二个参数就可以搞定了
  • 今天小编就为大家分享一篇vuex实现像调用模板方法一样调用Mutations方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 一、同级 actions 调用 对于同级模块下的 actions,如何互相调用呢? 实现方式:分发 action,action 通过 store.dispatch 方法触发。 二、不同模块 actions 调用 vuex 中 modules 可以将项目的 state 进行分块...

    一、同级 actions 调用

    对于同级模块下的 actions,如何互相调用呢?

    实现方式:分发 action,action 通过 store.dispatch 方法触发。

    二、不同模块 actions 调用

    由于 Vuex 使用了单一状态树,应用的所有状态都包含在一个大对象中。那么,随着应用的不断扩展,store 会变得非常臃肿。

    为了解决这个问题,Vuex 允许我们把 store 分 module(模块)。每一个模块包含各自的状态、mutation、action 和 getter。

    vuex 中 modules 可以将项目的 state 进行分块,互不干扰。那么在单个 moudule 中,actions 如何调用其他模块的 actions 或者根 actions、mutations、state ?

    actions 中提供如下方法:

    • rootGetters 用于获取其他模块getter;
    • rootState 用于获取其它模块state;
    • getters 用于获取当前模块getter;
    • state 用于获取当前模块state;
    • dispatch 用于调用action,当前模块和其他模块;
    • commit 用于调用mutation,当前模块和其他模块;

    (一)rootGetters

    const user = {
      ......
      actions: {
        async changeUser ({ rootGetters }) {
          console.log(rootGetters) // 根 getters 与其他模块 getters 下的信息
        },
      }
    }
    export default user

    (二)rootState

    rootState 与上述 rootGetters 同样的,获取根 state 和 其他模块 state 下的信息。

    可用于:模块 B 的 actions 里,调用模块 A 的 state。

    (三)getters

    const user = {
      ......
      getters: {
        name: state => state.username
      },
      actions: {
        async changeUser ({ getters }) {
          console.log(getters) // 当前模块中的 getters 信息
        },
      }
    }
    export default user

    (四)state

    state 与上述 getters 同样的,只能获取当前模块中 state 信息。

    (五)dispatch

    如果同级模块的 action 调用,我们使用 dispatch 来触发;

    如果在根文件下,定义一个 log 方法,通过 dipatch 去调用,则可以通过 root 参数:

    const user = {
      ......
      getters: {
        name: state => state.username
      },
      actions: {
        async changeTime ({ dispatch }, time) {
          dispatch('log', { time }, { root: true })
        },
      }
    }
    export default user

    根模块 index.js 文件下:

    const store = new Vuex.Store({
      actions: {
        log({}, { time }) {
          console.log(time)
        }
      },
    })
    
    export default store
    

    模块 B 的 actions,需要调用模块 A 的 actions 时,可以使用 root: true 实现。这里 dispatch 的第一个参数,需要传入其他模块的 actions 路径,第二个参数为传给 actions 的数据,若不传,也需要预留,第三个参数是配置选项,申明这个 actions 不是当前模块的;

    (六)commit

    commit 触发 mutations,从而同步更新state,如:

    const user = {
      state: {
        token: '',
      },
      mutations: {
        setToken: (state, token) => {
          state.token = token
        },
      },
      actions: {
        async Login ({ commit }, userInfo) {
          const { username, password } = userInfo
          const resp = await api.login({ username, password })
          const { tokenInfo } = resp.data
          commit('setToken', tokenInfo.token)
        },
      }
    }
    export default user

    如果想触发其他模块的mutation动态更新state,则需要借助参数root:

    首先在根模块 index.js 文件下:

    import user from './modules/user'
    import home from './modules/home'
    const store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      /* 最好能够根据功能划分模块,将业务代码写在vuex里,尽可能地将视图层(vue)和领域层(vuex)分离 */
      modules: {
        user,
        home,
      }
    })
    export default store
    

    然后在 home.js 文件的模块下:

    const home = {
      ......
      actions: {
        async changeToken ({ commit }, token) {
          commit('user/setToken', token, { root: true }) // 重点
        },
      }
    }
    export default home

    总结:commit 是调用 mutations 用的,dispatch 是调用 actions 用的,state 是当前模块的 state,而 rootState 是根 state 和其他模块的 state。

    展开全文
  • 1、流程顺序“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。2、角色定位基于流程顺序,二者扮演不同的角色。Mutation:专注于修改State,理论上是修改State的唯一途径...怎么调用...
  • export default new Vuex.Store({ state: { count: 0, text: 'current count:' }, mutations: { add1 (state) { state.count++ }, add2 (state, payload) { state.count += payload } } }) 直接通过...
  • Vuex--actions--使用/教程/实例

    多人点赞 2022-01-27 23:29:17
    本文用示例介绍Vuex的五大核心之一:actions
  • 文章目录 一、为什么要使用actions 二、actions使用 三、映射actions 一、为什么要使用actions 通常情况下, Vuex要求我们Mutaiton中的方法必须是同步方法 主要原因是当我们使用devtools时, devtools可以帮助我们捕捉...
  • 在上一章的例子中介绍了actions可以在内部发起异步请求,且能够在内部调用mutation,下面介绍一下actions的其他用法: actions和mutations一样允许传一个自定义参数; actions支持互相调用(mutations不支持); ...
  • 1.直接store中dispatch export default { methods: { clickFn() { this.$store.dispatch("sampleFn") //不带参 this.$store.dispatch("withParamFn",param...import { mapActions } from "vuex"; export default {
  • vuexactions使用

    2021-08-30 19:16:12
  • vuexactions操作

    2022-02-16 10:57:47
    前面写了state 的获取和mutations 提交,今天来写actions的提交。 actions其实就是mutations,只不过actions做的是异步的操作,mutations做的是同步的操作, 所以,actions进行提交动作到mutations,mutations再...
  • Vuex跨模块调用方法

    2022-07-29 13:27:50
    第一个参数携带了模块A的命名空间,第二个参数是值,重点在于第三个参数**{roottrue}**,添加了roottrue,则表示开放权限模块A的权限,否则无法实现跨模块调用方法。模块文件定义完成,便可通过vue的computed对象...
  • 今天小编就为大家分享一篇vuex actions异步修改状态的实例详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vuex学习使用,附带调用方法
  • 如图是我的工程,user.js中的actions需要调用tagsView.js中的actions方法 方法 logout({ commit, dispatch , state }) { debugger return new Promise((resolve, reject) => { logout().then(() => { ...
  • 这次给大家带来vuex使用步骤详解,vuex使用的注意事项有哪些,下面就是实战...这次给大家带来Vuex的mutations与actions使用详解,mutations与actions使用的注意事项有哪些,下面就是实战案例,一起来看一下。区分 ac...
  • vuexactions的使用

    千次阅读 2020-04-19 17:00:54
    先创建actions方法 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations={ add(state,n){ state.count+=n }, reduce(state,...
  • Vuex-actions的使用

    千次阅读 2020-10-16 16:24:56
    但是某些情况我们希望在vuex中进行一些异步操作,比如网络请求,必然是异步的,那这个时候就需要用actions了。 action类似于mutation,但是是用来代替mutation进行异步操作的。 二、action的使用 可以传递参数也...
  • vuex说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的...对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。 对于问
  • [] } /** * 获取字典 * @param commit vuex的commit * @param state vuex的state * @param dictFieldName 字典在vuex的state属性名 * @param dictCode 字典编码 * @param dictMutationName 字典的mutation方法名 ...
  • 在state.js中添加 userInfo: {},2.actions.js中添加同步用户信息-将参数userInfo传递给USER_INFO创建一个方法-不用异步方法syncUserInfo({commit}, userInfo){commit(USER_INFO, {userInfo});},3.创建一个中间变量...
  • vuex 中各个模块之间互相调用 actions

    千次阅读 2021-11-20 11:53:48
    还是会出现这样的需求的,我们的业务中...举个例子就是 a模块要调用b模块中的actions 那么我们在a模块中就应该是书写是 module a a.js dispatch(‘b/getListData’, params, { root: true }) { namespaced: true, act
  • Vue 之 Vuex(5)actions 的使用

    万次阅读 2021-06-06 23:44:48
    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍...
  • vuexactions异步请求操作

    千次阅读 2021-12-03 15:17:34
    通过actions来实现异步操作,actions通过mutations去实现state赋值 1. 通过actions来实现异步操作,actions通过mutations去实现state赋值 mutations: { getData(state,payload){ state.num = payload } } ...
  • actions(异步操作) state: { info:{ name:'xxx', age:xxx } }, mutations:{ updateinfo(state) { setTimeout(() => { state.info.name="xxx" },1000) } }, actions:{ aupdateinfo(context) { // ...
  • VuexActions 中的方法添加回调

    千次阅读 2020-12-23 11:46:27
    Vuex 中,我们会使用 Actions 进行一些异步操作,例如 API 请求。 在许多情况下,我们需要对这样的操作添加回调,在此,我以登录提示为例介绍三种方法: 第一种(不推荐) App.vue methods: { ...mapActions([ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,294
精华内容 6,117
关键字:

vuex的actions的方法调用