脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vuex通过getters访问数据undefined

vuex通过getters访问数据为undefined问题及解决

 更新时间：2022年08月31日 15:43:46   作者：qiqingfu  
这篇文章主要介绍了vuex通过getters访问数据为undefined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

getters访问数据为undefined问题

本篇文章可能对你的帮助不大, 只是个人开发中的一些记录。不同的业务和应用场景可能问题不同。

在通过 uni-app 开发商城时，用户快捷登录之后，服务器返回一个 token 数据，我将其同步到 vuex module下的 user 模块中。

然后从登录页返回到用户页，并发起 http 请求，获取用户的个人信息。

但是在请求时，我会在请求拦截器中获取 vuex 中的 token 数据。如果存在就携带到请求头中和服务器做 OAuth 验证。如果不存在就直接不携带 token。

用户登录成功之后，返回到用户页发起请求，但是获取用户信息接口是必须做 OAuth 验证的。问题在于在请求拦截器中 不能通过 vuex 的 getter 正确获取到 token值，而是返回 undefined。

request.js

import Http from "../xxx/http";
import store from "../sotre";
const request = new Http({
  baseURL: xxxxx,
  timeout: 50000,
  // 省略
});
request.interceptors.request.use((config) => {
  let token, g_t;
  if (
    (g_t = store.getters[`user/token`]) ||
    (g_t = Storage.get(USER_TOKEN_KEY))
  ) {
    token = g_t.token || null;
  }
  if (token) {
    config.header["Authorization"] = "Bearer " + token;
  }
  return config;
});

问题在于 g_t = store.getters[user/token] 获取的值为 undefined。

经过排查发现，vuex 中 getters 下的通过 state 获取的字段实现没有在 state 中定义。而是通过异步登录之后，才将其设置到 user 模块下的 state 中，使其变为不是响应式的。

写一个类似例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>姓名: {{ realName }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.3.0/dist/vuex.js"></script>
<script type="module">
  Vue.use(Vuex);
  const store = new Vuex.Store({
    state: {},
    mutations: {
      change(state, data) {
        state.name = data;
      }
    },
    getters: {
      name: state => {
        return state.name;
      }
    }
  });
  new Vue({
    el: "#app",
    store,
    data: {
      message: "Hello"
    },
    computed: {
      realName() {
        return this.$store.getters.name;
      }
    },
    created() {
      setTimeout(() => {
        this.$store.commit('change', 'zhangsan');
      })
    }
  })
</script>
</body>
</html>

异步代码执行的时候, state 中并没有 name 属性。所以一开始 getters 下的 realName 就算是 undefined。异步代码提交的 commit，在想 state 中新增 name 字段，但是它已不是响应式的。

解决方法：

就是提前在 state 中定义 getters 需要的某些字段，异步变更 state 中的字段它也是响应式的。getters 的值也会进行计算。

getters 类似于 vue 中的计算属性。

修改上面的代码为:

const store = new Vuex.Store({
    state: {
        name: ""
    },
    // 省略...
  })  

这样 getters 的值会根据 name的值改变而进行计算。

项目中的代码比上面的例子更复杂，但是问题是类似的。经过排查后才发现，所以在博客中总结一下。

小结：使用 vuex 时, getters 中需要计算的 state 属性一定要提前声明，使其成为响应式的值。

vuex getters(组件mounted调用)使用注意

逻辑

  • state存储数据（一开始为空数据，通过网络请求后更新数据）
  • 在组件mounted中先调用actions方法通过mutations更新state数据，
  • 接着组件mounted在调用getters 操作state中的数据，供组件使用
mounted(){
    // 进入组件立即发送网络请求获取商品信息
    this.$store.dispatch('detail/getCommdityInfo',this.skuId)
    console.log(this.skuInfo) //为undefined
    console.log(this.cateNav) //控制台报错
}

state: {
    commdityData:{}
  },
  mutations: {
    SET_COMMDITY_LIST(state,value){
      state.commdityData = null
      // 将商品信息存入组件内
      state.commdityData = value
      console.log('state.commdityData',state.commdityData)
    }
  },
  actions: {  
    async getCommdityInfo(context,query){
      const res = await getCommdityDetail(query)
      context.commit('SET_COMMDITY_LIST',res.data.data)
    }
  },
  getters:{
    skuInfo:state => state.commdityData.skuInfo,
    cateNav:state => {
        const {category1Name,category2Name,category3Name} = state.commdityData.categoryView 
        return [category1Name,category2Name,category3Name]
    },
    
  }

结果报错：组件在mouted 调用getters属性时，getters属性读取state数据（一开始为空），读取不到数据

**原因：**组件调用actions执行异步网络请求，通过mutations更新state数据还没有来得及执行

解决方案

更改getters中操作数据的属性，try-catch错误处理

cateNav:state => {
      // 使用情景，组件在mounted中调用，getters 的属性时，此时state未更新；解构会出错，所以要错误处理！！
      try{
        const {category1Name,category2Name,category3Name} = state.commdityData.categoryView 
        return [category1Name,category2Name,category3Name]
      }
      catch{
        return {}
      }
    },

！！！注意：在组件的methods中写方法调用则可正常使用getters的数据！！ 

控制台输出：

1：mounted 输出

2：methods 方法的输出

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    这篇文章主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图），本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vuejs 制作背景淡入淡出切换动画的实例

    vuejs 制作背景淡入淡出切换动画的实例

    今天小编就为大家分享一篇vuejs 制作背景淡入淡出切换动画的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用Bootstrap + Vue.js实现添加删除数据示例

    使用Bootstrap + Vue.js实现添加删除数据示例

    本篇文章主要介绍了使用Bootstrap + Vue.js实现 添加删除数据示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • vue draggable组件实现拖拽及点击无效问题的解决

    vue draggable组件实现拖拽及点击无效问题的解决

    这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧
    2022-05-05
  • 关于Vue虚拟dom问题

    关于Vue虚拟dom问题

    这篇文章主要介绍了Python合成Excel表的实现代码（多sheet）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • Vue表单控件数据绑定方法详解

    Vue表单控件数据绑定方法详解

    本文将详细介绍Vue表单控件数据绑定方法,需要的朋友可以参考下
    2020-02-02
  • Vue路由跳转的4种方式小结

    Vue路由跳转的4种方式小结

    本文主要介绍了Vue路由跳转的4种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue中el-form-item展开项居中的实现方式

    vue中el-form-item展开项居中的实现方式

    这篇文章主要介绍了vue中el-form-item展开项居中的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现Excel本地下载及上传的方法详解

    Vue实现Excel本地下载及上传的方法详解

    相信大家在项目中经常会遇到一些上传下载文件的相关功能。这篇文章将为大家介绍一下Vue实现Excel本地下载及上传的示例代码，需要的可以参考一下
    2022-07-07
  • Vue Element前端应用开发之获取后端数据

    Vue Element前端应用开发之获取后端数据

    这篇文章主要介绍了Vue Element前端应用开发之获取后端数据，对vue感兴趣的同学，可以参考下
    2021-05-05

最新评论