在 Nuxt 3.0 使用 Pinia 狀態管理套件

Nuxt
, ,

做法

安裝依賴套件。

1
npm install pinia @pinia/nuxt

修改 nuxt.config.js 檔。

1
2
3
4
5
6
7
export default defineNuxtConfig({
  // ... other options
  modules: [
    // ...
    '@pinia/nuxt',
  ],
})

新增 stores/authStore.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { defineStore } from 'pinia';

const useAuthStore = defineStore('authStore', () => {
  const token = ref(useCookie('token'));
  const authUser = ref(null);
  const setToken = (v) => {
    token.value = v;
  };
  const setAuthUser = (v) => {
    authUser.value = v;
  };
  return {
    token,
    authUser,
    setToken,
    setAuthUser,
  };
});

export default useAuthStore;

引入並使用。

1
2
3
4
5
6
7
import useAuthStore from '~/stores/authStore';

const authStore = useAuthStore();

if (!authStore.token) {
  //
}

參考資料