Nuxt 3 中使用 VueX 4：轻松无缝的集成指南

vue.js

2024-03-13 15:02:35

Nuxt 3 中顺畅使用 VueX 4

导言

Nuxt.js 3 简化了 VueX 集成，让你轻松地在项目中使用现有的 VueX 4 存储。本指南将一步步指导你完成集成过程，消除困扰你“找不到存储”的错误。

解决问题

“找不到存储”错误通常源于以下原因：

存储文件夹未命名为“store”（小写）。
在 nuxt.config.js 中未正确注册存储。

集成步骤

1. 正确命名存储文件夹

在项目根目录下，确保有一个名为“store”的文件夹，它将包含你的 VueX 存储模块。

2. 注册存储（nuxt.config.js）

在 nuxt.config.js 中添加：

modules: [
  // 其他模块，
  '@nuxtjs/vuex',
]

这将注册 VueX 模块并自动查找“store”文件夹中的模块。

3. 创建存储模块

在“store”文件夹中创建 index.js，并添加你的 VueX 存储定义：

export const state = () => ({
  count: 0,
})

export const mutations = {
  increment(state) {
    state.count++;
  },
}

4. 访问存储（组件中）

使用 useStore() 钩子访问存储：

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    return {
      count: computed(() => store.state.count),
      increment: () => store.commit('increment'),
    }
  }
}
</script>