如何在新的 Nuxt 3 项目中安装 Vuex？

Question

我需要有人帮助我解释如何在 Nuxt 3 应用程序中安装 Vuex。

当我使用这个命令安装 Nuxt 3

npx nuxi init

我有一个新的 Nuxt 3 应用程序，但是当我想在 Nuxt 中使用 Vuex 时，我不能，因为它没有默认安装在一个新的 Nuxt 3 应用程序中。
所以我想我需要使用“npm i vuex”来安装它，好吧我知道这很容易，但对我来说不是。
我需要有人一步一步地向我解释如何让它工作。

互联网上没有关于如何在新的 Nuxt 3 应用程序中设置 Vuex 的文档。
如果有人可以通过

npx nuxi init

安装的带有Nuxt 3应用程序的简单项目发送给我或在此处提供代码，我将了解为什么等...

Answer 1

首先查看Pinia和Nuxt状态管理。

Pinia： Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

Pinia 现在是新的默认值

Vue 的官方状态管理库已更改为 Pinia。 Pinia 具有与 Vuex 5 几乎完全相同或增强的 API，描述 在 Vuex 5 RFC 中。你可以简单地将 Pinia 视为 Vuex 5，带有 不同的名字。 Pinia 也适用于 Vue 2.x。

Vuex 3 和 4 仍将得到维护。但是，不太可能添加 它的新功能。 Vuex 和 Pinia 可以安装在同一个 项目。如果你正在将现有的 Vuex 应用程序迁移到 Pinia，它可能是 合适的选择。但是，如果您打算开始一个新项目， 我们强烈建议改用 Pinia。

Nuxt 状态管理：Nuxt 提供可组合的 useState 以创建跨组件的响应式和 SSR 友好的共享状态。

如何在 Nuxt3 中安装 Vuex

在安装 nuxt3 之后，您应该使用此命令来安装依赖项：

npm i

然后使用此命令安装 Vuex：

npm install vuex@next --save

或

yarn add vuex@next --save

取决于您的包管理器。

然后转到您的根项目并创建

plugins\

目录。

在插件里面创建

vuex.js

文件然后在里面写这些代码：

import { createStore } from "vuex";
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(store);
  // Install the store instance as a plugin

});

现在你

app.vue

运行这些代码来检查它：

<template>
</template>

<script>
export default {
  data() {},
  mounted() {
    console.log(this.$store.state.count);
  },
};
</script>

总结

1. 安装依赖项
2. 安装vuex
3. 创建 vuex 插件

Answer 2

我发布了一个类似于 Nuxt 2 的模块，将从

store

文件夹中读取所有文件，支持嵌套和 SSR。

https://github.com/vedmant/nuxt3-vuex

您可以通过

yarn add nuxt3-vuex-module

或

npm install nuxt3-vuex-module

安装它。

添加到您的 Nuxt 3 配置：

export default defineNuxtConfig({
  modules: [
    'nuxt3-vuex-module',
  ],
})