關於vuex與v-route的結合使用

把vue實際用於項目的過程中遇到過一些問題

1.如何將vuex和vue-route結合使用（接口調用成功回調頁面這類等等）

   1.初始考慮的方法是在vuex引入vue-router，vuex寫一些業務邏輯代碼，當接口處理完畢之后通過vue-route來處理頁面。

     當時這種方式耦合性太高，不推薦使用。vuex應該處理數據相關的操作，不應該處理界面層的事情。

 

   2.通過Promise的方式，比較推薦這種方式。在vuex里面返回Promise，頁面層通過Promise來處理頁面相關的操作，代碼如下

  actions: {
    activitySetOrModifyManage({commit}, param){
      console.log(param);
      return new Promise((resolve, reject) => {
        axios.post(baseUrl.activitySetManageUrl, qs.stringify(param))
          .then(function (response) {
            console.log(JSON.stringify(response.data));
            let data = response.data;
            if (data.code == 200) {
              resolve();
            } else {
              reject()
            }
          })
          .catch(function (error) {
            console.log(error);
            reject()
          });
      });

    },

 

this.activitySetOrModifyManage(param).then(
      ()=>{
          console.log('接口調用成功，編程改變路由')
          this.$router.push({ path: '/activityList' })
        },
      ()=>{
         console.log('接口調用失敗')
       }

);

     在回調的Promise里面可以處理很多事情，關於頁面層的事情都可以在這里處理。邏輯業務全部剝離放在vuex里面，降低耦合性。