Nuxt,将 Vuex 存储拆分为单独的文件会出现错误:未知突变类型:登录

2024-02-23

我试图将我的 Nuxt Vuex 存储文件拆分为单独的文件。并且没有全部Vuex getters, mutations and actions到一个巨大的文件中。这演示项目位于 Github 上 https://github.com/dutchwebworks/nuxt-learning/tree/feature/vuex-separation顺便一提。

我读过这个官方 Nuxt Vuex Store 文档 https://nuxtjs.org/guide/vuex-store#modules-mode;但似乎无法让它发挥作用。对于放置东西的位置有点模糊。

我在这些文件中有以下内容:

以下是我的:store/index.js

import Vue from "vue";
import Vuex from "vuex";
import Auth from "./modules/auth";

Vue.use(Vuex);

export const store = () => {
    return new Vuex.Store({
        state: {

        },
        modules: {
            Auth
        }
    })
}

这是我的:store/auth.js

const state = () => {
    username: null
};

const getters = {
    username: state => {
        return state.username;
    },
    isAuthenticated: state => {
        return state.username != null;
    }
};

const mutations = {
    login: (vuexContext, username) => {
        vuexContext.username = username;
        this.$router.push("/dashboard");
    },
    logout: vuexContext => {
        vuexContext.username = null;
        this.$router.push("/");
    }
};

const actions = {

};

export default {
    state,
    getters,
    mutations,
    actions,
};

最后在我的:pages/index.vue

这就是我所说的地方login突变:

<script>
    export default {
        layout: "non-logged-in",
        data() {
            return {
                username: null
            }
        },
        methods: {
            onSubmit() {
                this.$store.commit("login", this.username);
            }
        }
    }
</script>

我收到的错误:

[vuex] unknown mutation type: login

我在这里做错了什么?我以为我正在正确导入所有内容store/index.js


您必须在 store/index.js 文件中像这样导出存储常量:

export default store

将此代码行放在文件末尾。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nuxt,将 Vuex 存储拆分为单独的文件会出现错误:未知突变类型:登录 的相关文章

  • 通过jquery在日期框中自动添加斜杠/符号[重复]

    这个问题在这里已经有答案了 我发现几个问题但没有答案 所以我问问题 如何添加自动斜杠 符号
  • Three.js - 如何使用姿势估计数据为 3D 模型制作动画

    我正在尝试使用姿势估计坐标来对 Three js 中的装配模型进行动画处理 我正在使用的姿势估计技术提供了视频源中人物的实时 x y z 坐标 我正在尝试使用这些坐标相应地移动 3D 模型 我使用下面的代码 其中一些代码是我在相关问题的答案
  • fetch API 不通过 post 发送数据

    我在使用 Fetch API 通过 post 发送数据时遇到问题 服务器只收到一个空的 JSON 有人能帮我吗 基本上 我正在更新状态数据并将其发送到 API 提交的数据 请求 submitedData async event gt eve
  • Jquery - (重新)连接动态生成的元素

    很多时候 我的元素与附加功能挂钩 例如 myfav autocomplete myfav datepicker myfav click somefunction 但是 当通过某些代码动态生成此类的更多实例时 新的 myfav 已经死了 需要
  • jQuery 输入焦点不起作用

    我正在尝试在表中创建数据的内联编辑 为此 我将单元格中的文本更改为输入 document ready function td edit on click function this html
  • LitElement 不更新列表中的复选框

    我有一个简单的清单 每个项目都有一个删除按钮 当我选中第一个项目然后删除它时 列表会更新 删除该项目 但会选中下一个项目的复选框 下一项的属性是正确的 这是我的代码 import LitElement html from lit eleme
  • req.body 为空 Express js

    我花了几个小时试图找出为什么 req body 是空的 我在 stackoverflow 上到处查看并尝试了所有方法 但没有运气 Express js POST req body 空 https stackoverflow com ques
  • 如何在 JavaScript 中将本地化日期转换为标准日期?

    我正在编写一段 JavaScript 代码来对包含日期 包含本地化日期 和其他字段的数据表进行排序 例如 lunes 29 de agosto de 2011 field1 field2 lunes 28 de agosto de 2011
  • 找出 Jquery ajax 请求被重定向到的位置

    所以 我收到了这个ajax请求 请参阅 金发女郎 大约6英尺高 看起来像这样 ajax url http example com makeThing dataType html type POST data something someot
  • underscore.js 中断路器的重要性是什么? [复制]

    这个问题在这里已经有答案了 In 下划线 js http underscorejs org docs underscore html 有这样的代码 if iterator call context obj keys i keys i obj
  • React 和 ES6 继承

    Note 这篇文章是在 React 不支持 ES6 v12 时发布的 我有一个 ES6 课程 class BaseClass getInitialState return message Hello render return div di
  • 获取顶部框架的 URL

    在 Facebook 应用程序中 我需要检查顶部框架 主窗口 URL 是什么 并相应地显示内容 我尝试使用以下内容 if top location toString toLowerCase indexOf facebook com lt 0
  • 单击

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我知道如何用 jquery 做到这一点 但我被 React 困住了 每当用户点击 div 时 我如何聚焦输入字段 你需要有一个onCl
  • 在 Angularjs 中格式化输入值

    我正在尝试编写一个指令 自动格式化数字
  • 根据传单中的属性更改标记颜色

    我的目标是让我的标记根据它们的不同而采用三种不同的颜色rating财产 我看过类似的帖子 其中使用对象来定义颜色 每个标记都有一个rating属性在 1 到 5 之间 我正在考虑使用 else if 语句 例如 if rating lt 3
  • Wordpress 上的 Javascript 注入预防

    我的 WordPress 博客得到以下内容恶意的注入脚本 eval function p a c k e d e function c return c
  • 自动打开默认电子邮件客户端并预填充内容

    当用户在页面上保存某些内容时 我需要自动打开用户的默认电子邮件客户端 我需要填充电子邮件主题 地址并在电子邮件正文中添加一些内容 实现这一目标的最佳选择是什么 我知道mailto 属性 但用户必须单击此属性 我不确定它是否允许您指定主题和内
  • CSS3 Marquee / Ticker 动画最后没有空格

    我正在用 2 个项目集合构建字幕 旋转木马效果 循环两者item collection跨越translateX并不难 这里是小提琴 http jsfiddle net k1k3h2p0 但我不喜欢每个循环末尾的空白区域 知道两个集合的宽度可
  • 按 Chartjs 条形图的键对对象进行分组

    我正在尝试使用 Chart js 创建条形图 我在尝试根据每个用户的状态创建分组条形图时陷入困境 这是数据 statusId 0 firstName Joe status appealed count 1 statusId 0 firstN
  • 如何在javascript中访问请求查询字符串参数?

    我见过许多利用 RegEx 的解决方案 坦率地说 这似乎有些可笑 因为 javascript 是如此通用 必须有一种更简单的方法来访问请求参数 有人可以给我演示一下吗 我发现了一个有用的方法网的深度 http www dotnetbull

随机推荐