[Vue] Global State with Composables
在 Vue Composition API 下,想要有全域狀態,但又不用 Pinia,可以使用下面的方法:
// 檔名:useTest.js
import { ref, readonly } from 'vue';
// 有 import 這個檔案的 .vue 都可以使用這個 ref
const global = ref(0);
export function useTest() {
// import 這個檔案的 .vue 檔,各自有這個 ref
const count = ref(0);
const countPlus = () => {
count.value++;
};
const globalPlus = () => {
global.value++;
};
return {
// 設定全域 ref 唯讀,只能透過 return 的 function 修改
global: readonly(global),
globalPlus,
count,
countPlus
};
}
參考連結: