nuxt3使用pinia🍍
Sonder
2022-06-26
794字
2分钟
浏览 (5.4k)
安裝pinia
分別安裝: pinia, @pinia/nuxt, @nuxtjs/composition-api 這三個套件
yarn add pinia @pinia/nuxt @nuxtjs/composition-api設定nuxt.config.js
export default {
// ... other options
buildModules: [
'@pinia/nuxt',
],
}上面的都裝好之後，就可以準備開發囉!
yarn devPinia基本介紹
基本架構
store/index.ts
import { defineStore } from "pinia";
// 將其命名為useXXXStore，就像vue3的composable一樣
const useStore = defineStore("main", {
state: () => ({
counter: 4,
name: 'Sonder',
}),
actions: {},
getters: {
doubleCount(state) {
return state.counter * 2
},
},
});
export default useStore;打印 state
import useStore from '~~/store';
const store = useStore();
console.log(`store===>`, store.name)