Vuex获取this对象及深度state监测

Vuex中无法获取到this对象,需要通过dispatch传入上下文this

Vue监测state对象内部字段更新或数组某一数据更新可用:deep: true

computed: mapState({
  user_update_watcher: state => state.account.user_update
}),
watch: {
  user_update_watcher: {
    handler: 'userUpdateWatcher',
    deep: true
  }
},
methods: {
  userUpdate () {
    var params = {}
    params.localMsg = {'msg_server_busy': '系统繁忙,请稍后再试!'}
    this.$store.dispatch('userUpdate', {'context': this, 'userId': this.userId, 'params': params})
  },
  userUpdateWatcher (data, oldData) {
    ...
  }
}
export default {
  state: {
    user_update: {
      'data': null,
      'success': false,
      'timestamp': 0
    }
  },
  mutations: {
    COMMON_USER_UPDATE_CALLBACK: (state, response) => {
      Vue.set(state.user_update, 'timestamp', new Date().getTime())
      let context = response.context
      let httpCode = response.httpCode
      if (httpCode === 403) {
        Vue.set(state.user_update, 'success', false)
        context.$router.push({path: '/login?page=user_update'})
        return
      }
      if (httpCode !== 200) {
        Vue.set(state.user_update, 'success', false)
        context.$dialog.alert({mes: response.localMsg.msg_server_busy, btn_mes: '确认'})
        return
      }
      let code = response.data.code
      if (code !== 0) {
        Vue.set(state.user_update, 'data', null)
        Vue.set(state.user_update, 'success', false)
        context.$dialog.alert({mes: response.data.error.errMsg, btn_mes: '确认'})
        return
      }
      Vue.set(state.user_update, 'data', response.data.data)
      Vue.set(state.user_update, 'success', true)
    }
  },
  actions: {
    userUpdate ({ commit }, object) {
      // 更新用户信息
      api.user_update(object.userId, object.params).then((response) => {
        commit(types.COMMON_USER_UPDATE_CALLBACK, {'context': object.context, 'httpCode': response.status, 'data': response.data})
      }).catch((response) => {
        commit(types.COMMON_USER_UPDATE_CALLBACK, {'context': object.context, 'httpCode': response.status, 'data': response.data, 'localMsg': object.params.localMsg})
      })
    }
  }
}
上一篇 Vue组件中直接获取Vuex状态state数据
下一篇 Vuex的actions传递多个参数
目录
文章列表
1 Facebook网页分享标记
Facebook网页分享标记
2
Spring Boot开源项目
Spring Boot开源项目
3
Spring Security OAuth2 Redis 模式下认证服务器
Spring Security OAuth2 Redis 模式下认证服务器
4
移动开发平台给开发者提供的appkey泄漏是否会导致安全问题
移动开发平台给开发者提供的appkey泄漏是否会导致安全问题
5
使用yum搭建LNMP环境
使用yum搭建LNMP环境
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。