在vuex用于存放公用的数据和方法,并且数据改变可以实现视图更新。但是使用也是很麻烦同步的要使用mutations,异步的要使用actions，而且只能通过commit来更新数据。

下面来实现这样一个常见功能，登录的时候存储用户名，在内容页的头部显示用户名

user.ts用来存放user数据和更新user的方法

interface User {
  token: string;
  username: string;
  id: number;
  role: string;
}
import { reactive } from "vue";

export const user = reactive({
  token: "",
  username: "",
  id: 0,
  role: ""
});

export function setUser(val: User) {
  user.token = val.token;
  user.id = val.id;
  user.role = val.role;
  user.username = val.username;
}

login.vue中存入数据

import { setUser } from "@/store/user";

setUser({
  token: res.token,
  id: res.user.id,
  role: res.user.role,
  username: res.user.username
});

header.vue中展示数据

import { user, setUser } from "@/store/user";
import {
  computed
} from "vue";

//...省略了多余代码
const username = computed(() => user.username);
return {username}

header.vue中如果要修改可以引入setUser方法进行修改视图会相应更新
其实vue3的reactive和vue2中的observable功能是一样的，这是vue2中obervable的使用方法
https://blog.csdn.net/weixin_35958891/article/details/102503896