vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u)

2023-05-16

场景

. SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource
  使用的方式是
actions : {
    setTaskList : function (store) {
        let url = 'http://zhihu.carsonlius_liu.cn/api/tasks';
        Vue.$http.get(url).then(function (response) {
            if (response.status === 200) {
                store.commit('setTask', response.body);
            }
        });
    }
}

报错提示 Error in mounted hook: "TypeError: Cannot read property 'get' of undefined

分析

. 提示Vue.$http.get 是不存在;打印之后果然不存在, 所以问题就是Vue.上面了
. 在actions里面打印 console.log(Vue);
  `warn('Vue is a constructor and should be called with the `new` keyword');`
. 所以尝试实例化Vue后的变量调用 $http

解决

. 声明Vue实列的常量 并且依靠这个常量调用$http
const Http = new Vue
actions : {
        setTaskList : function (store) {
            let url = 'http://zhihu.carsonlius_liu.cn/api/tasks';
            Http.$http.get(url).then(function (response) {
                if (response.status === 200) {
                    store.commit('setTask', response.body);
                }
            });
        }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u) 的相关文章

  • 确保 Vuex 状态在渲染组件之前加载

    我有一个add user vue成分 这是我用于添加新用户和编辑现有用户的模板 所以在页面加载时我检查路线是否有id 如果是这样 我从状态数组加载用户来编辑它 我的问题是user未定义 因为状态数组users是空的 如何确保我的用户对象不是
  • 为动态创建的组件分离 vuex 存储

    这个问题让我有点卡住了 不幸的是 我在这里找不到答案 问也没有帮助 因此 在做了一些研究并到处询问之后 似乎我找到了这个问题的解决方案 如果您有一个已经知道答案的问题 并且您 希望公开记录这些知识 以便其他人 包括你自己 稍后可以找到它 当
  • 如何从 vue-router 访问 vuex getter 并设置守卫?

    我正在尝试使用 Vue 进行操作 但遇到了一些麻烦 1 我无法从 router index js 文件访问我的 getters 我可以访问它 但它像带有返回函数的函数一样返回 我无法调用并获取值 2 我无法正确设置守卫 使用 Angular
  • Vuex 存储在 NUXT 中间件中未定义

    我正在练习 NUXT 从教程来看它运行良好 我的在进入NUXT中间件时失败 逻辑是 如果页面重定向到其他页面 它将进入中间件并使用 axios 获取结果 中间件 search js import axios from axios expor
  • 如何在Vuex中深度克隆状态并回滚?

    在 Vuex 中 我想拍摄树中对象属性的快照 克隆 修改它 然后可能回滚到以前的快照 背景 在应用程序中 用户可以在应用某些更改之前尝试它们 应用更改时 它们应该影响主 vuex 树 用户还可以单击 取消 放弃更改并返回到之前的状态 Exa
  • 如何在Vuex中存储非响应式数据?

    我有数据 在 VueJS 应用程序初始化之前加载到页面上一次 并且该数据不会一直更改 而 html 页面不会重新加载 经典 CGI 应用程序 而不是 SPA 数据示例 const nonReactiveObjectWithSomeNeste
  • vue中的防抖和节流

    在Vue中 防抖和节流是两种常用的优化技术 用于限制事件的触发频率 以提高页面性能 防抖 Debounce 是指在事件被触发后 等待一段时间后再执行回调函数 如果在这段等待时间内 事件又被触发 则重新计时 防抖通常用于限制重复触发频率较高的
  • 将 vuex 状态与服务器同步的推荐策略

    想象一下这个简单的例子 您有一个 Vue JS 应用程序 用户可以在其中创建任务列表并对它们进行排序 这些列表应由服务器存储在数据库中 假设我们有一个ListComponent它完成了大部分用户体验 我的问题是 我应该使用哪种模式来处理前后
  • VueJS - Vue 未定义

    我挑战自己编写一个应用程序 从 API 获取数据并将其显示在各种组件中 我对 VueJS 还很陌生 我使用 VueResource 来访问 API 使用 VueX 来进行状态管理 我已经设置了我的商店 我添加了操作 突变和吸气剂等 一旦我添
  • Vue DOM 对计算属性没有反应

    我有一个按钮 如果计算属性的有效属性为 false 则该按钮设置为禁用 如果为 true 则应启用该按钮并允许用户移至当前流程中的下一步 我的 currentStep 计算属性正在根据当前步骤输入的更改完美更新 但按钮 disabled c
  • Vuex - 绑定助手中的动态命名空间(mapState,...)

    我正在动态注册 vuex 存储模块 store registerModule home grid GridStore 然后在组件中 export default name GridComponent props namespace type
  • Vuex + 打字稿

    我正在将 JavaScript 项目转换为 TypeScript 但是 当我尝试让 Vue 使用 Vuex 时 出现类型错误 import Vue from vue import Vuex from vuex Vue use Vuex 看起
  • 访问嵌套对象时 Vue 发出警告

    我不知道为什么在访问嵌套对象时会收到 Vue 警告 user area name Vue warn 渲染错误 TypeError 无法读取未定义的属性 名称 类型错误 无法读取未定义的属性 名称 仅访问该对象没有任何警告 user name
  • 如何使用 Nuxt Auth 模块在 Vuex 中重新获取用户?

    简短的问题 是否可以通过 Nuxt Auth 模块手动更新 Vuex 中的用户数据 为什么我有这个问题 我的问题是这样的 我在用户文档中的 MongoDB 中保存了一些点赞 关注 我的认证是用Nuxt Auth实现的 Nuxt Auth 在
  • Vuetify 在浅色和深色主题之间切换(使用 vuex)

    所以在我的 Vue 项目中 我基本上有两个页面 组件 将根据 URL 使用 vue router 显示 我可以通过按钮在这些页面 组件之间切换 我还使用 VueX 来管理一些数据 现在 我在其中一个组件中添加了一个开关 用于在 Vuetif
  • 在Vuex模块中进行继承的方法

    我使用 VueJS 和 Vuex 构建我的应用程序 当我有多个模块使用相同的数据字段时 我遇到了这个问题 它是关于像 dat 这样的 API 配置 getUsers state commit axios get urls API USER
  • Vue.use() 抛出“无法读取未定义的属性‘use’”

    尝试1 main js import createApp from vue import store from store store import App from App vue Vue config productionTip fal
  • 如何将复选框绑定到Vuex存储?

    我有一个包含一些复选框的组件 我需要能够访问从 Vue 应用程序中的其他组件检查了哪些复选框 但我无法弄清楚 也无法在网上找到 如何将复选框正确连接到我的 Vuex 商店 将组件内的复选框连接到 Vuex 存储的正确方法是什么 以便它们的行
  • 如果不刷新页面,Vuex 状态不会更新

    我正在构建一个单页面应用程序 用户可以根据他们是否登录来看到不同的页面 登录调用工作正常 授权令牌保存在本地存储中 设置 我已经设置了一个名为的吸气剂loggedIn返回true如果在状态上设置了令牌 这是我的确切代码auth js商店模块
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an

随机推荐