# [Vue] 在獨立的 js 檔內使用 Pinia 時出現錯誤訊息 no active Pinia

###### tags: `Vue`

## 問題
在 axios `interceptors` 內使用 `Pinia` 時得到以下錯誤訊息
:::danger
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
:::

// api/index.js
import axios from 'axios';
import useFetchStore from '@/stores/fetch';

const instance = axios.create({
  baseURL: 'xxx',
});

const fetchStore = useFetchStore();
const { handleResponse } = fetchStore;

instance.interceptors.response.use(
  (response) => {
    handleResponse(response.status);

    return response;
  },
  (error) => {
    if (axios.isAxiosError(error)) {
      handleResponse(error.status);
    } else {
      console.log('unexpectedError: ', error);
    }

    return Promise.reject(error);
  },
);

## 解法
### 解法一：在 `interceptors` 內使用 store

// api/index.js
import axios from 'axios';
import useFetchStore from '@/stores/fetch';

const instance = axios.create({
  baseURL: 'xxx',
});

instance.interceptors.response.use(
  (response) => {
    const fetchStore = useFetchStore();
    const { handleResponse } = fetchStore;
    handleResponse(response.status);

    return response;
  },
  (error) => {
    const fetchStore = useFetchStore();
    const { handleResponse } = fetchStore;
    if (axios.isAxiosError(error)) {
      handleResponse(error.status);
    } else {
      console.log('unexpectedError: ', error);
    }

    return Promise.reject(error);
  },
);

### 解法二：創建 store.js，在檔案內 import Pinia
若不想採用[解法一](#解法一：在-interceptors-內使用-store)在所有 `interceptors` 內一直宣告，可以將程式碼獨立出來，需要 Pinia 的地方再 `import`
1. 創建 `stores/store.js`

    import { createPinia, setActivePinia } from 'pinia';

    const pinia = createPinia();
    setActivePinia(pinia);

    export default pinia;

2. 修改 `main.js`

    import { createApp } from 'vue';

    // import { createPinia } from 'pinia'; // 刪除
    import pinia from '@/stores/store'; // 新增

    import App from './App.vue';
    import router from './router';

    const app = createApp(App);

    // app.use(createPinia()); // 刪除
    app.use(pinia); // 新增

    app.use(router);

    app.mount('#app');

3. 修改 `api/index.js`
1. 使用 ESLint 要加：`// eslint-disable-next-line no-unused-vars`
2. 使用 ESLint 和 TypeScript 要加：`// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars`

    import axios from 'axios';
    import pinia from '@/stores/store';
    import useFetchStore from '@/stores/fetch';

    const instance = axios.create({
      baseURL: 'xxx',
    });

    const fetchStore = useFetchStore();
    const { handleResponse } = fetchStore;

    instance.interceptors.response.use(
      (response) => {
        handleResponse(response.status);

        return response;
      },
      (error) => {
        if (axios.isAxiosError(error)) {
          handleResponse(error.status);
        } else {
          console.log('unexpectedError: ', error);
        }

        return Promise.reject(error);
      },
    );

## 參考資料
* [解法一參考資料：How to use Pinia outside a component in js file](https://stackoverflow.com/a/72340936 "How to use Pinia outside a component in js file - Stack Overflow")
* [解法二參考資料：Larvel-mix + Pinia throws an error: getActivePinia was called with no active Pinia](https://stackoverflow.com/a/73221064 "laravel - Larvel-mix + Pinia throws an error: getActivePinia was called with no active Pinia - Stack Overflow")
* [setActivePinia](https://pinia.vuejs.org/api/modules/pinia.html#setActivePinia "Module: pinia | Pinia")

---

:::info
建立日期：2023-09-28
更新日期：2023-09-28
:::