img

nuxt3使用pinia🍍

2022-06-26 0条评论 4.3k次阅读 JavaScript


安裝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 dev

Pinia基本介紹

官方文档:https://pinia.vuejs.org/

基本架構

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)

💬 COMMENT


🦄 支持markdown语法

👋友