import request from "@/utils"; // request可以是一個(gè)封裝方法，用于發(fā)送http請(qǐng)求，通常返回Promise

const domin = "http://....."; // domin為服務(wù)端對(duì)應(yīng)環(huán)境的域名

export const getUserInfo = (params) => {
  return request(`${domin}/接口`, "GET", params);
};

// 此處引入接口地址
import { getUserInfo } from "@/api";

export default {
  state: {
    userInfo: null,
  },
  mutations: {
    setUserInfo(state, data) {
      state.userInfo = data;
    },
  },
  actions: {
    // 命名可以直接后邊加Action
    getUserInfoAction({ commit, state }, params) {
      const apiParams = {
        // 對(duì)params進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換成接口需要的入?yún)⒏袷?
      };
      let tempObj = {}; // 此作用域的全局對(duì)象，臨時(shí)變量作用
      getUserInfo(apiParams)
        .then((res) => {
          // 處理返回結(jié)果，例如轉(zhuǎn)換成對(duì)應(yīng)的符合業(yè)務(wù)需求的數(shù)據(jù)結(jié)構(gòu)
        })
        .catch((err) => {
          // 處理異常，即異常狀態(tài)下數(shù)據(jù)應(yīng)該是什么樣子
        })
        .finally(() => {
          // 存入state；也可以用來(lái)執(zhí)行一些請(qǐng)求結(jié)束的提示操作，例如展示toast彈窗等
          commit("setUserInfo", tempObj);
        });
    },
  },
};

<template>
  <h1>{{ userInfo }}</h1>
</template>
<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      myData: {},
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfoAction"]),
  },
  mounted() {
    // 這里myData作為組件產(chǎn)生的數(shù)據(jù)，根據(jù)實(shí)際業(yè)務(wù)需求來(lái)決定是否作為參數(shù)傳遞
    this.getUserInfoAction(this.myData);
  },
};
</script>