Vuex里面异步提交actions

た入场券 2023-06-29 05:47 6阅读 0赞

可以先看一下官网对[vuex里的actions的解释][vuex_actions]  
我们在页面中一般提交mutations，比如：this.$store.commit(‘eventName’)，或许还有参数，`一条重要的原则就是要记住 mutation 必须是同步函数`，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。  
但是actions提交的是异步，因为它触发后的返回的是一个promise，也有回调事件，当然它不是直接提交事件，而是提交mutations。  
我的用法：

import Vue from 'vue'
    import Vuex from 'vuex'
    import testStore from './testStore.js'
    import api from '../api/api'          //  这是我封装的axios请求
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        initIndex: 0,       // 信息传给后台的index
        updateIndex: 0,     //不处理时更新的index 
        initCustomer : false,
      },
      getters: {
        company: state => {
          return localStorage.getItem('company');
        },
        token: state => {
          return localStorage.getItem('token');
        },
      },
      mutations: {
        //此处调用 api 来实时刷新 customers  
        _refreshCumsomer(state, context) {    
          api.clientList({index: state.initIndex, page: 100, upindex:state.updateIndex, shopid: localStorage.getItem('shopid')}).then(res => {
              if (res.success == 1) {
                 // 你的处理逻辑... 
              }        
              window.setTimeout(() => context.commit('_refreshCumsomer', context), 5000);       //  这是如何在自身内轮询本接口事件
          })
        },
      },
      actions: {
        refreshCumsomer (context) {
          if (context.state.initCustomer == false) {
            context.commit('_refreshCumsomer', context);         // 这里提交的是mutations，context是和store具有相同方法和示例的对象，可以理解为this
            context.state.initCustomer = true
          }
        },
      },
    
      modules: {
        testStore
      }
    })

然后在页面里触发，这里触发actions是：this.$store.dispatch(‘refreshCumsomer’);

[vuex_actions]: https://vuex.vuejs.org/zh/guide/actions.html