如何在全新Nuxt 3项目中安装并配置Vuex？

以下是基于npx nuxi init创建的全新Nuxt 3项目，安装和配置Vuex的完整步骤：

1. 安装Vuex依赖 #

Nuxt 3 默认不包含Vuex，需要手动安装适配Vue 3的Vuex 4.x版本，执行以下命令：

npm install vuex@next
# 或使用yarn
yarn add vuex@next

2. 创建Vuex Store文件 #

在项目根目录下新建store文件夹，然后在其中创建index.js文件，写入基础的Store配置：

// store/index.js
import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

3. 创建Nuxt插件注册Vuex #

在项目根目录的plugins文件夹中新建vuex.js文件，用来在Nuxt应用启动时注册Vuex Store：

// plugins/vuex.js
import { store } from '~/store'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(store)
})

注意：Nuxt 3的插件必须导出一个默认函数，通过nuxtApp.vueApp访问Vue实例完成插件注册。

4. 在组件/页面中使用Vuex #

选项式API示例（pages/index.vue） #

<template>
  <div>
    <p>当前计数: {{ $store.state.count }}</p>
    <p>双倍计数: {{ $store.getters.doubleCount }}</p>
    <button @click="$store.commit('increment')">+1</button>
    <button @click="$store.commit('decrement')">-1</button>
    <button @click="$store.dispatch('asyncIncrement')">延迟+1</button>
  </div>
</template>

组合式API示例（pages/index.vue） #

<template>
  <div>
    <p>当前计数: {{ count }}</p>
    <p>双倍计数: {{ doubleCount }}</p>
    <button @click="handleIncrement">+1</button>
    <button @click="handleDecrement">-1</button>
    <button @click="handleAsyncIncrement">延迟+1</button>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()
const count = computed(() => store.state.count)
const doubleCount = computed(() => store.getters.doubleCount)

const handleIncrement = () => store.commit('increment')
const handleDecrement = () => store.commit('decrement')
const handleAsyncIncrement = () => store.dispatch('asyncIncrement')
</script>

验证运行 #

执行npm run dev启动项目，访问http://localhost:3000，点击按钮测试计数变化，确认Vuex正常工作。

内容的提问来源于stack exchange，提问作者IT Time Programming