[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
  };
}

參考連結：

• What is a Vue.js Composable?