Vuex Module 模块化使用

login、user模块详情请看上文↑↑↑

在 login 的 actions 里, 需要用 user 的 state users

state 是当前模块的 state, 而 rootState 是根 state,

const actions = {
  getLogin({ commit, state, rootState }, data) {
    const { username, password } = data;
    return new Promise((resolve, reject) => {
      getLogin({
        phonenumber: username.trim(),
        password: password,
      })
        .then((res) => {
          const { status, data } = res;
          if (status === "1") {

            console.log(state.token)
            // log users
            console.log(rootState.user.users)

            commit("SET_TOKEN", data.token);
            setToken(data.token);
            resolve(res);
          } else {
            reject(res);
          }
        })
        .catch((res) => {
          reject(res);
        });
 
    });
  },
};

在 login 的 actions 里, 需要用 user 的 actions

const actions = {
  getLogin({ commit, dispatch }, data) {
    const { username, password} = data;
    return new Promise((resolve, reject) => {
      getLogin({
        phonenumber: username.trim(),
        password: password,
      })
        .then((res) => {
          const { status, data } = res;
          if (status === "1") {
            
            //dispatch 使用其他模块 actions
            dispatch("users/getUserInfo", null, { root: true });

            commit("SET_TOKEN", data.token);
            setToken(data.token);
            resolve(res);
          } else {
            reject(res);
          }
        })
        .catch((res) => {
          reject(res);
        });
 
    });
  },
};

 在 login 的 actions 里, 需要用 user 的 mutations

const actions = {
  getLogin({ commit }, data) {
    const { username, password} = data;
    return new Promise((resolve, reject) => {
      getLogin({
        phonenumber: username.trim(),
        password: password,
      })
        .then((res) => {
          const { status, data } = res;
          if (status === "1") {

            // 使用 user mutations 里面的 SET_USERS
            commit("user/SET_USERS", data, { root: true })

            commit("SET_TOKEN", data.token);
            setToken(data.token);
            resolve(res);
          } else {
            reject(res);
          }
        })
        .catch((res) => {
          reject(res);
        });
 
    });
  },
};

 在 login 的 actions 里, 需要用 user 的 getters

const actions = {
  getLogin({ commit, rootGetters }, data) {
    const { username, password} = data;
    return new Promise((resolve, reject) => {
      getLogin({
        phonenumber: username.trim(),
        password: password,
      })
        .then((res) => {
          const { status, data } = res;
          if (status === "1") {

            // log getters
            console.log(rootGetters.users)

            commit("SET_TOKEN", data.token);
            setToken(data.token);
            resolve(res);
          } else {
            reject(res);
          }
        })
        .catch((res) => {
          reject(res);
        });
 
    });
  },
};

 

Logo

前往低代码交流专区

更多推荐