（五）Vuex 中的Actions

老怪兽

发布于 2023-02-22 19:06:04

42000

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

Vuex 中的计的Actions

说明

actions 和 mutations 整体上是一样的，但是actions 支持异步代码 mutations 只支持同步代码，另外 actions 不会直接修改全局状态而是出发 mutations 来修改全局状态

一、示例远程异步加载数据

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from "./App.vue"

const store = createStore({
  state() {
    return {
      user: []
    }
  },

  mutations: {
    loadusers(state, payload) {
      state.user = paload.user
    }
  }

  // 定义actions 进行远程操作修改全局数据
  actions: {
    // context 可以触发 mutations 修改全局状态等
    fetchUser(context) {
      setTiomeout(() => {
        context.comit('loadusers', {user: 157****7802})
      }, 3000)
    }
  }
})

const app = createApp(App)
app.use(store)
app.mount("#app")

触发 `actions`

<script>
  export default {
    created() {
      {/* dispatch 是制定用来触发 actions的 里面的参数则是在store 中 actions 中定义的函数名字 */}
      this.$store.dispatch('fetchUser')
    }
  }
</script>

二、通过 `mapActions` 来访问 `actions`

<script>
  import { mapActions } from 'vuex'
  export default {
    // 直接在页面加载的时候调用
    created() {
      this.fetchUser()
    }

    // 把actions 中的函数映射到methods 中就可以直接通过this 来调用了
    methods: {
      mapActions(['fetchUser'])
    }
  }
</script>

三、`actions` 传递参数

说明

actions 也可以向 mutations 一样传递参数，都是通过第二个参数来传递

四、在 `actions` 中触发其他 `actions`

说明

如果要在 actions 中触发其他的 actions 直接通过 context 来调用就可以了，如果需要按顺序执行 actions 可以通过 promise 的 async 和 await 来操作，并且返回一个 promise，当上一个 actions 执行完了在调用其他需要执行的 actions.

注意

需要注意的是如果在 actions 内部调用其他 actions 就不能结构 dispatch 二十直接 dispatch('其他dispatch名字')

示例代码

import { createApp } from "vue";
import { createStore } from "vuex";
import App from "./App.vue";
import { users } from "./data/users";
import { blogs } from "./data/blogs";

const store = createStore({
  state() {
    return {
      users: [],
      blogs: [],
    };
  },
  mutations: {
    loadUsers(state, payload) {
      state.users = payload.users;
    },
    loadBlogs(state, payload) {
      state.blogs = payload.blogs;
    },
  },
  actions: {
    async fetchUsers({ commit }) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      commit("loadUsers", { users });
    },
    async fetchUsersAndBlogs({ dispatch, commit }) {
      await dispatch("fetchUsers");
      await new Promise((resolve) => setTimeout(resolve, 1000));
      commit("loadBlogs", { blogs });
    },
  },
});

const app = createApp(App);

app.use(store);

app.mount("#app");

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月26日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

node.js

登录后参与评论

0 条评论

热度