状态管理：所有页面全局共享的变量，而不是局限在某一个页面中。
适合作为全局状态的数据：比如已登录用户信息。
目录
- 一、创建user.ts文件
- 二、定义user模块
- 三、获取静态变量
- 四、修改状态变量
一、创建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的参数对象。
