Nuxt3 不再提供 Vuex 集成。推荐使用 pinia

    1. pnpm install pinia @pinia/nuxt

    配置 nuxt.config.js

    1. // nuxt.config.js
    2. export default defineNuxtConfig({
    3.   // ... 其他配置
    4.   modules: [
    5.     // ...
    6.     '@pinia/nuxt',
    7.   ],
    8. })

    新建 src/store/index.ts

    1. import { defineStore } from 'pinia'
    3. export const useMainStore = defineStore('main', {
    4.   state: () => ({
    5.     counter: 0,
    6.   }),
    7.   actions: {
    8.     increment() {
    9.       // `this` is the store instance
    10.       this.counter++
    11.     },
    12.   },
    13. })

    新建 src/store/modules/useUserStore.ts

    1. import { defineStore } from 'pinia'
    3. const USER_INFO = {
    4.   userName: '易师傅',
    5.   id: 1,
    6.   sex: '男',
    7. }
    9. export const useUserStore = defineStore('userInfo', () => {
    11.   const userInfo = reactive(USER_INFO)
    13.   return {
    14.     userInfo,
    15.   }
    16. })

    使用

    1. <template>
    2.   <div>
    3.     <strong>
    4.       姓名：{{ userInfo.userName }}
    5.       性别：{{ userInfo.sex }}
    6.     </strong>
    7.   </div>
    8. </template>
    10. <script setup lang="ts">
    11.   import { useUserStore } from '@/stores'
    12.   const userInfo = useUserStore().userInfo
    13. </script>