vuex-3-actions

2022-05-15 120

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 写几遍思路更加清晰了 ,理解也更透彻了欢迎大家一起学习交流

1.前言

写几遍思路更加清晰了 ,理解也更透彻了

欢迎大家一起学习交流

2. what actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

3. 上代码

组件内使用

这样写分的清楚 mutation和Action

待会用辅助函数

Action 通过 `store.dispatch`方法触发：

注意不要拼错

Ascy 异步

Sy 同步

methods: {
    changeStoreNumSy() {
      this.$store.commit("reduceSync", { num: 2 });
    },
    changeStoreNumASy() {
      this.$store.dispatch("reduceAscync");
    },
  },

store.js

state: {
    num:8,
},
  mutations: {
    reduceSync(state,obj){
      // state.num -= obj.num
      setTimeout(()=>{
          // 模拟数据请求
          // 不能进行异步更新
         state.num -= obj.num  
      },1000)
    }
  },
  // 类似于 mutaion
  actions: {
//  commit参数 等价于这个 var {commit} = context
    reduceAscync({commit }){
      setTimeout(() => {
        commit('reduceSync', {num:5})
      }, 1000);
    }
// 第二种写法
    // 异步的递减 context 类似store对象
   // reduceAscync(context){
    //   setTimeout(() => {
    //     context.commit('reduceSync', {num:5})
    //   }, 1000);
    // }
  },

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？为啥还要通过 action 周转下呢 ?

因为 mutation 必须同步执行

Action 就不受约束！我们可以在 action 内部执行异步操作

4. 辅助函数写法

23SX7)W6SOQ8AFON$~`T6}L.png

注意

1.引入别忘了

import {mapMutations} from "vuex"
import { mapActions } from 'vuex'

actions的辅助函数参数是对象需要加一个 key

调用的时候用这个 key

vuex-3-actions

1.前言

2. what actions

Action 类似于 mutation，不同在于：

3. 上代码

组件内使用

Action 通过 `store.dispatch`方法触发：

store.js

4. 辅助函数写法

注意

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vuex-3-actions

1.前言

2. what actions

Action 类似于 mutation，不同在于：

3. 上代码

组件内 使用

Action 通过 store.dispatch方法触发：

store.js

4. 辅助函数写法

注意

热门文章

最新文章

相关电子书

组件内使用

Action 通过 `store.dispatch`方法触发：