开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vuex state或getters总是返回undefined

Vuex是一个用于管理Vue.js应用程序状态的状态管理模式。它解决了在大型应用中组件之间共享状态时遇到的一些常见问题。在Vuex中，state表示应用程序的状态数据，getters允许我们对state进行计算和筛选。

对于给定的问题，当Vuex的state或getters总是返回undefined时，可能有几个原因：

未正确配置Vuex模块：在使用Vuex之前，需要正确配置Vuex模块。确保在Vue应用程序的入口文件中引入Vuex，并在创建Vue实例之前使用Vue.use(Vuex)来安装Vuex插件。然后，在Vuex模块中定义state和getters，并将其添加到Vuex的store中。
state或getters名称错误：检查state或getters的名称是否正确，确保它们与定义的Vuex模块中的名称一致。如果名称不匹配，调用state或getters时将返回undefined。
未正确定义state或getters：确保在Vuex模块中正确定义state和getters。state应该是一个对象，getters应该是一个包含计算属性的对象。确保使用正确的语法和逻辑来定义它们。
异步问题：如果涉及到异步操作或API调用来获取状态数据，可能需要使用Vuex的actions来处理异步逻辑。在actions中调用异步操作，然后使用mutations来修改state。确保在异步操作完成之后，再访问state或getters以获取正确的值。
使用错误的语法：确保使用正确的语法来访问state或getters。例如，使用this.$store.state.xxx来访问state，使用this.$store.getters.xxx来访问getters。如果不使用this.$store前缀，将无法正确访问state或getters。

总之，当Vuex的state或getters总是返回undefined时，需要检查Vuex模块的配置、名称、定义和语法是否正确，并考虑异步操作的处理方式。以下是腾讯云提供的与Vuex相关的产品和产品介绍链接地址：

产品名称：腾讯云服务器无限流量计费模式产品介绍链接地址：https://cloud.tencent.com/product/eb 优势：提供无限流量，适用于高流量网站和应用程序。应用场景：适用于需要处理大量流量的在线应用和网站。
产品名称：腾讯云CVM（云服务器）产品介绍链接地址：https://cloud.tencent.com/product/cvm 优势：提供弹性计算能力和灵活的网络配置，适用于各种应用场景。应用场景：适用于网站托管、应用程序部署、大数据分析等各种场景。

请注意，上述腾讯云产品仅作为示例，其他云计算品牌商也提供类似的产品和服务。

相关搜索:Vuex、State和Getters Vuex: getters总是返回初始值 jQuery Ajax总是返回"undefined"？jquery getResponseHeader总是返回'undefined'？切换案例总是返回undefined Vuex store getter总是返回false 页面重载导致Vuex getter返回undefined 我想计算Vuex的getters。但它返回的NaN Vuex getters forEach返回单个值而不是多个值 Redux管理字符串总是返回"undefined“访问ngrx Observable中的变量总是返回undefined 递归函数在最后总是返回undefined。如何修复？云函数get请求firestore的内容总是返回undefined 在Javascript中运行函数，但最后总是返回'undefined‘为什么JS总是返回'Cannot read property 'push‘of undefined'？exec总是返回-1(或127)Async await或.then()为redux操作返回undefined vuex函数-根据对象值返回true或false JS，函数返回undefined，而不是true或false Promise返回'undefined‘或babel编译代码不等待返回(async/await)

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从头为 Vue.js 3 实现 Vuex

store.state).toEqual({ count: 1 }) }) 毫无悬念地失败了 — Vuex 为 undefined。...让我们定义它： class Store { } const Vuex = { Store } 现在我们得到的是 Expected: {"count": 0}, Received: undefined...同时，dispatch 将总是返回一个 Promise - 所以 dispatch(...).then 应该是合法的。...这意味着如果用户的 action 没返回一个 Promise，或调用了某些类似 axios.get 的东西，我们也需要为用户返回一个 Promise。我们可以编写如下测试。...开始编写测试： test('getters', () => { const store = new Vuex.Store({ state: { count: 5 },

1.3K2 0

React报错之ref返回undefined或null

原文链接：https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null[1] 作者：Borislav Hadzhiev[2] 正文从这开始...~ 总览当我们试图在其对应的DOM元素被渲染之前访问其current属性时，React的ref通常会返回undefined或者null。...该钩子返回一个可变的ref对象，ref对象上的current属性被初始化为传递的参数。我们没有为useRef传递初始值，因此其current属性设置为undefined。...如果我们尝试在组件中直接访问ref上的current属性，我们会得到undefined，是因为 ref 还没有被设置，而且 div 元素还没有被渲染。...参考资料 [1] https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null: https://bobbyhadz.com/blog/react-ref-returns-undefined-or-null

1.2K1 0

Vue进阶（二十七）：Vuex 之 getters, mapGetters, …mapGetters详解

文章目录一、前言二、getters 三、mapGetters 辅助函数四、….mapGetters 五、拓展阅读 ---- 一、前言 Vuex提供了state状态统一管理树，开发者可以在vue中用...为了解决这个问题，vuex本身提供了类似于计算属性的方式，getters可以让你从store的state中派生出一些新状态，当然如果不是多个组件要用到这个状态，或者说每个子组件用到的派生属性不一样，那么...state getters.js // 第一个参数是state let address = (state) => { return '国籍:' + state.from...let findArr = function(state){ // 返回一个匿名函数 return function(number){ // 如果有相同的则返回n，如果找不到则返回...undefined let ifExit = state.arr.find(function(n){ return n===number }) if (typeof

1.3K2 0

Vuex入门（3）—— getters,mapGetters,…mapGetters详解

,vuex本身就提供了类似于计算属性的方式,getters可以让你从store的state中派生出一些新的状态,当然如果不是多个组件要用到这个状态,或者说每个子组件用到的派生属性不一样,那么,你完全可以不用...function最后会返回一个具体的数值 //本例中这个方法用于查询state中的arr数组是否存在某个值 let findArr = (state) => (number) => { let ifExit...= state.arr.find((n) => n === number) // arr.find是ES6语法中数组的扩展 if (typeof (ifExit) === 'undefined')...则没有这个烦恼,有些对ES6语法使用较为吃力的同学可以看下面的简易版本,来看看findArr究竟做了什么. let findArr = function(state){ // 返回一个匿名函数...return function(number){ // 如果有相同的则返回n，如果找不到则返回undefined let ifExit = state.arr.find(function

1.4K1 0

学习 vuex 源码整体架构，打造属于自己的状态管理库

== 'undefined' && window.Vue) { install(window.Vue) } 如果是 cdn script 方式引入vuex插件，则自动安装vuex插件，不需要用Vue.use...== undefined ?...== 'undefined', `vuex requires a Promise polyfill in this browser.`) */ if (!...$$state = state }) } watch 响应式地侦听 fn 的返回值，当值改变时调用回调函数。...mapState 为组件创建计算属性以返回 Vuex store 中的状态。

1.8K1 0

【Vue】数据通信——我们从组件通信说起

$nextTick，是将回调函数延迟在下一次dom更新数据后调用 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 ” this....Vuex.Store({ //strict: //state: //getters: //mutations: //actions: //modules...按单向数据流：数据流总是 Actions→Mutations→State，但是我们使用时也不一定总是全部使用，灵活一点。state作为vuex数据的终点，称为根状态，定义的值称为状态值。...Vue.use(Vuex) //创建vuex实例 export default new Vuex.Store({ //strict: //state: //getters:...}) 每一个模块又可以全包含或者部分包含state getters mutations actions const state = { userName: 'Lison' } const getters

2.9K2 0

面对 this 指向丢失，尤雨溪在 Vuex 源码中是怎么处理的

这时我们翻看下actions文档：https://vuex.vuejs.org/zh/guide/actions.html const store = new Vuex.Store({ state:...// 并且收集所有模块的 getters 放在 this....state: local.state, rootGetters: store.getters, rootState: store.state }, payload)...new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。...普通函数调用：在严格模式下绑定到 undefined，否则绑定到全局对象。

5291 0

Vue+Vue-Router+Vuex+SSR项目

Vue-Vue-Router-Vuex-SSR Vue+Webpack工程流搭建 Vue+Vue-Router+Vuex项目架构服务端渲染现在的前端框架是纯客户端渲染的，（请求网站的时候，返回的html...() Vuex 中 state 和 getters // store.js import Vuex from 'vuex' import defaultState from '..../getters/getters' export default () => { return new Vuex.Store({ state: defaultState, mutations...// getters/getters.js =========== computed export default { fullName(state) { return `${state.firstName...} }, getters: { textPlus (state, getters, rootState) { return state.text + rootState.count

8582 0

Vuex 2.0 源码分析

== 'undefined', `vuex requires a Promise polyfill in this browser.`) const { state = {},...== 'undefined', `vuex requires a Promise polyfill in this browser.`) 这行代码的目的是为了确保 Promsie 可以使用的，因为 Vuex...mappedState，函数对 val 的类型判断，如果 val 是一个函数，则直接调用这个 val 函数，把当前 store 上的 state 和 getters 作为参数，返回值作为 mappedState...那么为何 mapState 函数的返回值是这样一个对象呢，因为 mapState 的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，我们知道在 Vue 中...== 'undefined' && window.

2K3 0

Vuex是什么？Vuex能做什么？Vuex怎么使用？

应用实例： 1、购物车功能； 2、下单页面有选择优惠券按钮，点击进入优惠券页面，选择后返回到下单页，数据会绑定回来，显示已选择的优惠券； 3、登录状态等等 ? Vuex有哪几种属性？...3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中 Vuex的Getter特性 1、getters 可以对State进行计算操作，它就是...Vuex的Module特性 Module 可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。...使用Vuex的好处？ 1、多层嵌套的组件、兄弟组件间的状态会更好管理维护。 2、缓存一些当前要使用请求远程或本地的数据集（刷新后会自己销毁）。 3、有了第二条，就可以减少向服务器的请求，节省资源。.../vuex/store'; ... new Vue({ ... store ... }) Vuex常见错误 ? 很多时候，总是不知不觉的直接改变 store 中的状态。

9.4K5 1

一次完整的源码阅读过程

Vue.config.silent = true // 使用Vue实例来存储Vuex的state状态树，并利用computed去缓存getters返回的值 store....== undefined ?...== 'undefined' ? window : typeof global !== 'undefined' ?...这是我们最后处理好要返回的变量 ; 然后通过 isValidMap 方法判断 map 是否符合要求，即是否是数组或对象 ; 再然后调用了 normalizeMap 方法处理了变量 states ，从字面意义上来看..., bar: 'bar' }) 在这里我又发现了一个官方文档里没有提及的，就是以函数形式返回的时候，还能接收第二个参数 getters ，即：foo: (state, getters) => state.foo

2.9K1 0

从未看过源码，到底该如何入手？分享一次完整的源码阅读过程

Vue.config.silent = true // 使用Vue实例来存储Vuex的state状态树，并利用computed去缓存getters返回的值 store....== undefined ?...== 'undefined' ? window : typeof global !== 'undefined' ?...确定好了 state 和 getters 的值，最后就可以返回值了 return typeof val === 'function' ?..., bar: 'bar' }) 在这里我又发现了一个官方文档里没有提及的，就是以函数形式返回的时候，还能接收第二个参数 getters ，即：foo: (state, getters) => state.foo

1.8K4 0

从未看过源码，到底该如何入手？分享一次完整的源码阅读过程

Vue.config.silent = true // 使用Vue实例来存储Vuex的state状态树，并利用computed去缓存getters返回的值 store....== undefined ?...== 'undefined' ? window : typeof global !== 'undefined' ?...确定好了 state 和 getters 的值，最后就可以返回值了 return typeof val === 'function' ?..., bar: 'bar' }) 在这里我又发现了一个官方文档里没有提及的，就是以函数形式返回的时候，还能接收第二个参数 getters ，即：foo: (state, getters) => state.foo

1.5K2 0

从未看过源码，到底该如何入手？分享一次完整的源码阅读过程

Vue.config.silent = true // 使用Vue实例来存储Vuex的state状态树，并利用computed去缓存getters返回的值 store....== undefined ?...== 'undefined' ? window : typeof global !== 'undefined' ?...这是我们最后处理好要返回的变量 ; 然后通过 isValidMap 方法判断 map 是否符合要求，即是否是数组或对象 ; 再然后调用了 normalizeMap 方法处理了变量 states ，从字面意义上来看..., bar: 'bar' }) 在这里我又发现了一个官方文档里没有提及的，就是以函数形式返回的时候，还能接收第二个参数 getters ，即：foo: (state, getters) => state.foo

1.9K1 0

Vuex框架原理与源码分析

== 'undefined' && window.Vue) { install(window.Vue) } install方法将Vuex装载到Vue对象上，Vue.use(Vuex) 也是通过它执行...如果是2.x.x以上版本，可以使用 hook 的形式进行注入，或使用封装并替换Vue对象原型的_init方法，实现注入。...== 'undefined', `vuex requires a Promise polyfill in this browser.`) 在store构造函数中执行环境判断，以下都是Vuex工作的必要条件...condition) throw new Error(`[vuex] ${msg}`) } 数据初始化、module树构造环境判断后，根据new构造传入的options或默认值，初始化内部数据。...local.state, // local state local.getters, // local getters store.state, // root state

3.1K4 0

this，call，apply，bind（万字长文）

}; export default new Vuex.Store({ state, mutations, // getters }) this....'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 1 }, getters...Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性...= new Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed...this的绑定对象，通过new调用绑定到新创建的对象，return函数或对象，返回值不是新创建的对象，而是显式的返回函数或对象；call或apply的调用，非严格模式，为null和undefined；对象上的函数调用

1.2K3 0

13期前端冲刺必备指南-thiscallapplybind（万字长文）

}; export default new Vuex.Store({ state, mutations, // getters }) this....'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 1 }, getters...Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性...= new Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed...this的绑定对象，通过new调用绑定到新创建的对象，return函数或对象，返回值不是新创建的对象，而是显式的返回函数或对象；call或apply的调用，非严格模式，为null和undefined；对象上的函数调用

7072 0

vuex

Vuex 核心 state mutation action getter，模块内的getters不能和全局的getters重复，否则报错[vuex] duplicate getter key:...// 这里用了箭头函数，访问不了this // console.log(this); //undefined return state.foo.fooaaa;...from 'store/foo/getters.js' const foo = { // 使用命名空间 namespaced: true, state: {...getters不能和全局的getters重复），如果全局里面也有这个mutation或action，会都执行。 ...$store.commit('foo/add', amount) 在全局命名空间内分发 action 或提交 mutation 将 { root: true } 作为第三参数传给 dispatch 或

8831 0

Vue2.0-token权限处理

当用户登录的时候，向后端发起请求的时候，后端会返回给我一个token，前端可以进行校验，进行处理token ?...当前端拿到后端返回的token，可以通过localStorage存储到本地，然后通过jwt-decode对token进行解析，jwt-decode是一种对token的解析包，通过npm install..., user:{} } const getters = { //获取state状态 isAuthorization: state => state.isAuthorization, user:...({ state, getters, mutations, actions }) 　　通过以上vuex设置，我们可以吧得到的token和用户的一些信息存储到vuex中，方便其他页面进行调用 submitForm...}) } }) }, //封装的验证方法 isEmpty(value) { return ( value === undefined

7072 0

Vuex 之单元测试

commit 一个 mutation dispatch 一个 action 通过 $store.state 或 getters 访问 state 要针对 Vuex 进行的单元测试，都是基于 Vuex...store 的当前 state 来断言组件行为是否正常的；并不需要知道 mutators、actions 或 getters 的具体实现。...通过在 poodlesByAge 返回一个接受参数的函数，我们可以向 getters 中传入参数。...Vuex mutations 总是以两个参数的形式被调用：第一个参数是当前 state，第二个参数是 payload。...如果一个 getter 使用了其他 getters，你应该用符合期望的返回结果 stub 掉后者。

3.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭