Promise做了vuex和組件的一個橋樑

promise真是強大啊。。。

記錄一個案例：

需求是這樣的，用戶異步修改vuex裏面的數據，然後告訴組件已經修改完成。

方法一：

//store中index.js

import Vue from "vue";
import Vuex from "vuex";

import { UPDATEINFO } from "./mutations-types";
Vue.use(Vuex);

const state = {
  info: {
    username: "kebi",
    age: 40,
    height: 1.95
  }
};

const mutations = {
  //使用常量
  [UPDATEINFO](state, name) {
    state.info.username = name;
  }
};

const actions = {
  //1.context上下文 store對象
  //2.異步操作完成後以方法形式告訴外面:這種方法不優雅
     aUpdateInfo(context, payload){
      setTimeout(() => {
         context.commit(UPDATEINFO, payload.message);
        payload.success();
      },1000)
    }
};

const store = new Vuex.Store({
  state,
  mutations,
  actions
});

export default store;

在vuex裏面進行異步操作都是在actions裏面，我們使用setTimeout來模擬異步操作，然後在main.js中引入。

//store中mutations-types.js
export const UPDATEINFO = 'updateInfo'

這種寫法是官方推薦的寫法，目的是方便管理減少把名字寫錯的概率，所有mutations的名字均使用常量寫法

//HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ $store.state.info }}</h1>
    <button @click="updateInfo">修改信息</button>
    <button @click="aupdateInfo">異步修改信息{{msg}}</button>
  </div>
</template>

<script>
import { UPDATEINFO } from "../store/mutations-types";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    //2.
      aupdateInfo(){
       this.$store.dispatch('aUpdateInfo',  {
       message: '我是攜帶的信息',
       success: () => {
          console.log('裏面已經完成了')
        }
      })
     }

  }
};
</script>

在組件裏面dispatch一個actions,然後傳遞一個對象進去，對象裏面有屬性和方法。

當vuex裏面的actions已經修改信息完成了，然後回調success這個方法，在組件就會進行打印。

方法二：

//index.js
import Vue from "vue";
import Vuex from "vuex";

import { UPDATEINFO } from "./mutations-types";
Vue.use(Vuex);

const state = {
  info: {
    username: "kebi",
    age: 40,
    height: 1.95
  }
};

const mutations = {
  //使用常量
  [UPDATEINFO](state, name) {
    state.info.username = name;
  }
};

const actions = {
  //3.優雅寫法：
  aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit(UPDATEINFO, payload);
        //這裏告訴別人我已經做完了
        resolve("success");
      }, 1000);
    });
  }
};

const store = new Vuex.Store({
  state,
  mutations,
  actions
});

export default store;

在actions裏面，aUpdateInfo返回一個Promise包裹着異步操作，當修改完信息後再resolve出去一個success信息

<template>
  <div class="hello">
    <h1>{{ $store.state.info }}</h1>
    <button @click="updateInfo">修改信息</button>
    <button @click="aupdateInfo">異步修改信息{{msg}}</button>
  </div>
</template>

<script>
import { UPDATEINFO } from "../store/mutations-types";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: ""
    };
  },
  methods: {
    updateInfo() {
      this.$store.commit(UPDATEINFO, "gmx");
    },
    //3.終極優雅寫法：這個可以用於獲取用戶信息，獲取成功後返回給res，接收到res後再進行渲染
    aupdateInfo() {
      this.$store.dispatch("aUpdateInfo", "我是攜帶的信息").then(res => {
        this.msg = res //這裏可以拿到剛剛resolve出來的success信息
        console.log(res);
      });
    }
  }
};
</script>

效果如下：

 

相比第一種方法，第二種方法更優雅更時尚一些。小夥伴們可以按需採用。

如有什麼問題或者更好的方法請留言