在Nuxt3中使用pinia

一、安装依赖包

想要在nuxt3中使用pinia，一共需要安装两个依赖：pinia，**@pinia/nuxt**

yarn add pinia
yarn add @pinia/nuxt

二、配置pinia

安装完成之后我们需要在nuxt3的配置文件中将pinia添加进来,nuxt.config.ts：

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    buildModules: ['@pinia/nuxt'],
})

三、开始使用

定义store

使用很简单，首先在项目目录下新建一个stores的文件夹，再新建一个user.ts文件，内容为：

import { defineStore } from 'pinia'

export const userStore = defineStore('user', {
  state() {
    return {
      showLogin: false,
      isLogin: false
    }
  },
})

使用

import { userStore } from '~/stores/user';
const store = userStore();

// 修改store内的isLogin的值为true
store.$patch({
    isLogin: true
})
// 打印出来
console.log(store.isLogin);