在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