Online Judge——【前端项目初始化】全局状态管理

状态管理：所有页面全局共享的变量，而不是局限在某一个页面中。

适合作为全局状态的数据：比如已登录用户信息。

一、创建user.ts文件

我们要实现状态管理的话，要先创建一个目录store（之前项目初始化时已经帮我们创建了），vuex就像一个中央处理库，用于在vue.js应用程序中管理共享状态（数据），如下：

• 之后在store文件夹中建立user.js，用于专门存放用户的状态信息，简单理解就是用于保存用户的信息。
  state：存储的状态信息，比如用户信息。
  getters：便捷获取对象的一个方法
  mutation（尽量同步）：定义了变量进行增删改（更新）的方法
  actions：执行异步操作，并且触发mutation的更改（可以理解为actions调用mutation）。

二、定义user模块

user.ts文件如下：

// initial state
import { StoreOptions } from "vuex";

export default {
  namespaced: true,
  state: () => ({
    loginUser: {
      userName: "未登录",
    },
  }),
  actions: {
    getLoginUser({ commit, state }, payload) {
      commit("updateUser", { userName: "ly" });
    },
  },
  mutations: {
    updateUser(state, payload) {
      state.loginUser = payload;
    },
  },
} as StoreOptions<any>;

index.ts文件如下：

import { createStore } from "vuex";
import user from "./user";

export default createStore({
  mutations: {},
  actions: {},
  modules: {
    user,
  },
});

三、获取静态变量

const store = useStore();
store.state.user?.loginUser

效果演示：

四、修改状态变量

代码如下：

store.dispatch("user/getLoginUser", {
  userName: "ly",
});

代码解释：上述代码通过Vuex store的分发（dispatch）方法调用一个名为user/getLoginUser的action，并且传递了一个包含userName为ly的对象作为参数。

• store.dispatch是vuex store提供的一个方法用于分发一个action。action在vuex中执行异步操作（比如说API请求），然后将数据提交给mutations进行状态更新
• uer/getLoginUser是action的名称；“user”是vuex模块的命名空间（namespace），getLoginUser是该模块下的一个action名称，使用命名空间可以避免action名称冲突。
• { userName: "ly" }是传递给action的参数对象。