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’);

发布了38 篇原创文章 · 获赞 28 · 访问量 999

猜你喜欢

转载自blog.csdn.net/huanhuan03/article/details/103927901
今日推荐