Nuxt3 + Pinia 配置筆記

介紹

學習Nuxt3 + pinia 順手把它紀錄下來, 畢竟狀態管理是蠻常使用到的東西只好來踩踩坑了

配置

1.建立Nuxt後至nuxt.config.ts配置如下

export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
    ...
})

2.在Nuxt專案底下新增/Store

3.在/store新增需要的js檔, ex: /store/test.js

4.在test.js內容如下, 每個使用的變數或是function需要return

import { defineStore } from 'pinia'

export const testStore = defineStore('store', () => {
  const test= ref('');

  return {
    test,
  }
});

5.在其他vue底下引用的時候須import

import { testStore  } from "~~/store/test.js";

6.import之後可以直接呼叫做使用

tsetStore.test;