如何在组件里面把值传到vuex(state)里面然后在取出来_vue将获取的数据存入state-优快云博客

本文详细介绍了如何在Vue.js应用程序中使用Vuex进行状态管理，包括如何在组件间传递和更新状态，以及如何在store中定义和使用状态、mutations。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1:首先，需要在事件里面将值传到state里面
在这里插入图片描述

store.commit使用其类型进行调用通过这个进行调用

    openDtl(id,coreId) {
     this.$store.commit('setId',coreId)
      console.log(coreId)
      this.$router.push({
        name: "personaldtls",
        params: {
          id: id,
          coreId:coreId
        }
      });

2：在store里面写一个.js文件，定义方法
1：在state初始化值，2；在mutations写方法

    state: {
        access: '',
        userInfo: {},
        coreId:'',
    },

       mutations: {
        setAccess(state, access) {
            state.access = access
        },
        setUserInfo(state, userInfo) {
            state.userInfo = userInfo
        },
        setId(state,coreId){
            state.userInfo = coreId

        }
    },

3：再到需要调用的组件里面取出这个值，需要在computed里面定义

  computed:{
      ids(){
        return this.$store.state.user.coreId
      }

  },

我在created里面打印出来

  },
  created() {
    console.log(this.ids)
    this.reload();
    //政治面貌
    dtls("Politics").then(res => {
      this.Politics = res.datas;
    });
    //最高学历
    dtls("EducationType").then(res => {
      this.EducationType = res.datas;
    });
    // //所学

4：这样就可以在页面看到480行打印的代码
在这里插入图片描述