Vuex的状态管理：actions

actions的基本使用

Action类似于mutation，不同在于：

        Action提交的是mutation，而不是直接变更状态；（mutation里是直接更改state状态）

        Action可以包含任意异步操作；（mutation里不允许异步操作）

这里有一个非常重要的参数context：

        context是一个和store实例均有相同方法和属性的context对象；

        所以我们可以从其中获取到commit方法来提交一个mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters；

        但是为什么它不是store对象呢？这个等到我们讲Modules时再具体来说；

actions的分发操作

如何使用action呢？进行action的分发：

        分发使用的是 store 上的dispatch函数；

methods: {
      increment() {
        this.$store.dispatch("incrementAction")
      }
}

同样的，它也可以携带我们的参数：

 increment() {
        this.$store.dispatch("incrementAction", {count: 100})
      }

也可以以对象的形式进行分发：

 decrement() {
        // 3.派发风格(对象类型)
        this.$store.dispatch({
          type: "decrementAction",
          count:100,
        })
      }

actions的细节补充

1.参数问题

2.context的其他属性

3.另外一种提交风格（见上以对象的形式进行分发）

//store的index.js中
actions: {
    // 放函数
    // 1.参数问题
    incrementAction(context, payload) {
      console.log(payload)
      setTimeout(() => {
        context.commit('increment')
      }, 1000);
    },
    // 2.context的其他属性
    decrementAction({ commit, dispatch, state, rootState, getters, rootGetters }) {
      commit("decrement")
    }
  }

 

actions的辅助函数

action也有对应的辅助函数：

        对象类型的写法；

        数组类型的写法；

<template>
  <div>
    <h2>当前计数: {{ $store.state.counter }}</h2>
    <hr>
      <button @click="incrementAction">+1</button>
      <button @click="decrementAction">-1</button>
      <button @click="add">+1</button>
      <button @click="sub">-1</button>
    <hr>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    methods: {
      ...mapActions(["incrementAction", "decrementAction"]),
      ...mapActions({
        add: "incrementAction",
        sub: "decrementAction"
      })
    },
    setup() {
      const actions = mapActions(["incrementAction", "decrementAction"])
      const actions2 = mapActions({
        add: "incrementAction",
        sub: "decrementAction"
      })

      return {
        ...actions,
        ...actions2
      }
    }
  }
</script>

actions的异步操作

Action 通常是异步的，那么如何知道 action 什么时候结束呢？

        我们可以通过让action返回Promise，在Promise的then中来处理完成后的操作；

//store下的index.js中actions返回Promise函数，完成就调用resolve，发生错误调用reject
actions: {
    getHomeMultidata(context) {
      return new Promise((resolve, reject) => {
        axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
          context.commit("addBannerData", res.data.data.banner.list)
          resolve({name: "coderwhy", age: 18})
        }).catch(err => {
          reject(err)
        })
      })
    }
  }

//在组件中使用，先dispatch派发操作，返回promise，通过promise.then获取请求后的结果
<script>
  import { onMounted } from "vue";
  import { useStore } from 'vuex'

  export default {
    setup() {
      const store = useStore()

      onMounted(() => {
        const promise = store.dispatch("getHomeMultidata")
        promise.then(res => {
          //请求成功返回res会拿到 resolve()里传过来的内容
          console.log(res)
        }).catch(err => {
          //请求失败返回err会拿到reject()里传过来的内容
          console.log(err)
        })
      })
    }
  }
</script>