Notice: 函数 WP_Scripts::localize 的调用方法不正确$l10n 参数必须是一个数组。若要将任意数据传递给脚本,请改用 wp_add_inline_script() 函数。 请查阅调试 WordPress来获取更多信息。 (这个消息是在 5.7.0 版本添加的。) in /data/www/appblog/wp-includes/functions.php on line 6131

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传递多个参数