vue3笔记（4）vuex

更复杂的通信可以使用vuex实现，以增加代码维护性。
这篇记录vuex的使用。

vuex简介

vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个vuex应用的核心就是store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。
（1）vsuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新；
（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化；

代码实现

store文件夹下index.ts中。

import { createStore } from 'vuex';
export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

State => 基本数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter => 从基本数据派生的数据，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation => 是唯一更改 store 中状态的方法，且必须是同步函数。
Action => 像一个装饰器，包裹mutations，使之可以异步。用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module => 模块化Vuex，允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

store/modules/文件夹下user.ts

export interface IUserState {
  token: string;
  user_info: IUserInfo;
}
@Module({ dynamic: true, store, name: "user" })
class User extends VuexModule implements IUserState {
  public token = getToken() || "";
  public user_info = getUserBag() || {};

  // @Mutation 标注为mutation
  @Mutation
  private SET_TOKEN(token: string) {
    this.token = token;
  }
  @Mutation
  private SET_USERINFO(username: string, id: number) {
    // 设置用户名
    this.user_info["username"] = username;
    this.user_info["id"] = id;
  }

    // @Action 标注为action
  @Action({ rawError: true })
  public async Login(
    userInfo: { username: string; password: string },
  ) {
    // 登录接口，拿到token
    let { username, password } = userInfo;
    username = username.trim();
    password = password.trim();
      const { data } = await login({ username, password });
      if (data && data.code == 0) {
        const { token, user_id, username} = data.data;
        const newUser = {
          username: username,
          id: user_id,
        };
        this.SET_TOKEN(token);
        this.SET_USERINFO(username, user_id);
        setToken(token, newUser);
        window.location.reload();
      } else {
        const errMsg = (data && data.msg) || "服务器升级中..."
        ElMessage.error(errMsg);
      }
  }
// getModule 得到一个类型安全的store，module必须提供name属性
export const UserModule = getModule(User);

问题debug

登录过程某一方法错误，被框架捕获。
解决方案：只需在注释中添加rawError选项即可，@Action({rawError: true})，这样console就会显示正常问题报错了。

ajax请求数据

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里；如果被其他地方复用，最好将请求放入 action 里，方便复用，并包装成 promise 返回。