如何在组件里面把值传到vuex(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行打印的代码
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值