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. 辅助函数写法
注意
1.引入别忘了
import {mapMutations} from "vuex" import { mapActions } from 'vuex'
- actions的辅助函数参数 是对象 需要加一个
key- 调用的时候 用这个
key
