{"id":1019,"date":"2023-03-12T09:30:03","date_gmt":"2023-03-12T01:30:03","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1019"},"modified":"2023-04-29T13:15:04","modified_gmt":"2023-04-29T05:15:04","slug":"vuex-component-communication-optimization-router-page-jumping-causes-watchers-to-not-listen-for-data-changes","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/12\/vuex-component-communication-optimization-router-page-jumping-causes-watchers-to-not-listen-for-data-changes\/","title":{"rendered":"Vuex\u7ec4\u4ef6\u901a\u4fe1\u4f18\u5316\uff1arouter\u9875\u9762\u8df3\u8f6c\u5bfc\u81f4watcher\u4e0d\u80fd\u76d1\u542c\u6570\u636e\u53d8\u5316"},"content":{"rendered":"

\u672c\u6587\u4f18\u5316\u81f3\uff1ahttp:\/\/www.appblog.cn\/2018\/07\/10\/Vuex\u83b7\u53d6this\u5bf9\u8c61\u53ca\u6df1\u5ea6state\u76d1\u6d4b\/<\/a><\/p>\n

\u95ee\u9898\u66b4\u9732<\/h2>\n

\u5f53httpCode\u4e3a403\u672a\u6388\u6743\u65f6\uff0c\u9875\u9762\u5c06\u7acb\u5373\u8def\u7531\u8df3\u8f6c\u81f3\u767b\u5f55\u9875\u9762\uff0c\u5bfc\u81f4\u7ec4\u4ef6\u9500\u6bc1\uff0c\u539f\u9875\u9762\u65e0\u6cd5\u76d1\u542c\u72b6\u6001\u6570\u636e\u53d8\u5316\uff0c\u5373user_update_watcher<\/code>\u65e0\u6cd5\u89c2\u5bdfuser_update<\/code>\u53d8\u5316\uff0cuserUpdateWatcher<\/code>\u4e0d\u56de\u8c03\u3002<\/p>\n

<\/p>\n

COMMON_USER_UPDATE_CALLBACK: (state, response) => {\n  ...\n  if (httpCode === 403) {\n    Vue.set(state.user_update, 'success', false)\n    context.$router.push({path: '\/login?page=user_update'})\n    return\n  }\n  ...\n}<\/code><\/pre>\n
\u6539\u8fdb\u65b9\u6848<\/h2>\n
computed: mapState({\n  user_update_watcher: state => state.account.user_update\n}),\nwatch: {\n  user_update_watcher: {\n    handler: 'userUpdateWatcher',\n    deep: true\n  }\n},\nmethods: {\n  userUpdate () {\n    var params = {}\n    params.localMsg = {'msg_server_busy': '\u7cfb\u7edf\u7e41\u5fd9\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01'}\n    this.$dialog.loading.open('\u8bf7\u7a0d\u5019')\n    this.$store.dispatch('userUpdate', {'context': this, 'userId': this.userId, 'params': params})\n  },\n  userUpdateWatcher (val, oldVal) {\n    this.$dialog.loading.close()\n    switch (val.state) {\n      case 'un_auth':\n        this.$router.push({path: '\/login?page=user_update'})\n        return\n      case 'failure':\n      case 'error':\n      default:\n        return\n      case 'success':\n        break\n    }\n    console.log(val.data)\n  }\n}<\/code><\/pre>\n
export default {\n  state: {\n    user_update: {\n      'data': null,\n      'state': '',\n      'timestamp': 0\n    }\n  },\n  mutations: {\n    COMMON_USER_UPDATE_CALLBACK: (state, response) => {\n      Vue.set(state.user_update, 'timestamp', new Date().getTime())\n      let context = response.context\n      let httpCode = response.httpCode\n      if (httpCode === 403) {\n        Vue.set(state.user_update, 'state', 'un_auth')\n        return\n      }\n      if (httpCode !== 200) {\n        Vue.set(state.user_update, 'state', 'failure')\n        context.$dialog.alert({mes: response.localMsg.msg_server_busy, btn_mes: '\u786e\u8ba4'})\n        return\n      }\n      let code = response.data.code\n      if (code !== 0) {\n        Vue.set(state.user_update, 'data', null)\n        Vue.set(state.user_update, 'state', 'error')\n        context.$dialog.alert({mes: response.data.error.errMsg, btn_mes: '\u786e\u8ba4'})\n        return\n      }\n      Vue.set(state.user_update, 'data', response.data.data)\n      Vue.set(state.user_update, 'state', 'success')\n    }\n  },\n  actions: {\n    userUpdate ({ commit }, object) {\n      \/\/ \u66f4\u65b0\u7528\u6237\u4fe1\u606f\n      api.user_update(object.userId, object.params).then((response) => {\n        commit(types.COMMON_USER_UPDATE_CALLBACK, {'context': object.context, 'httpCode': response.status, 'data': response.data})\n      }).catch((response) => {\n        commit(types.COMMON_USER_UPDATE_CALLBACK, {'context': object.context, 'httpCode': response.status, 'data': response.data, 'localMsg': object.params.localMsg})\n      })\n    }\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u672c\u6587\u4f18\u5316\u81f3\uff1ahttp:\/\/www.appblog.cn\/2018\/07\/10\/Vuex\u83b7\u53d6this\u5bf9\u8c61\u53ca\u6df1\u5ea6s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[279],"class_list":["post-1019","post","type-post","status-publish","format-standard","hentry","category-vue","tag-vuex"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1019"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1019\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}