如何在组件里面把值传到vuex(state)里面然后在取出来

最新推荐文章于 2024-09-22 14:24:58 发布
最新推荐文章于 2024-09-22 14:24:58 发布
阅读量6.6k 收藏 7
点赞数 6
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/webshao/article/details/103313844
本文详细介绍了如何在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行打印的代码
在这里插入图片描述

Vue3.0 Vuex传值
weixin_56529686的博客
05-09 966
1.store/index.ts import { createStore } from 'vuex' export default createStore({ state: { name: '默认值' }, mutations: { setState(state, args) { state.name = args } }, actions: { setStateName({ commit }, args) { commit(
vuex state 实现组件间传值
夜阑珊妖妖
08-13 699
npm add vuex 下载vuex store.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ name:jing, age:18, look:beautiful }, mutations:{}, actions...
vue 将数据保存到vuex中
热门推荐
tumi
11-26 2万+
在项目中遇到这样一个问题，就是在登入的时候同时需要从后台获取到左边的导航，但是如果使用h5的localStorage来保存导航信息，会出现app加载进去之后localStorage才保存进浏览器，在mounted方法中，console.log(window.localStorage.getItem('xx')打印出来是undefined，于是把数据保存到vuex中管理，以下是把数据保存到vuex中
如何将从接口返回的值 存储到vuex的state的某个属性中
kairrys
04-27 2510
不知道如何开始使用vuex的小伙伴可以看这里vuex官网，文档里面有详细的使用讲解 首先我们创建好一个store和初始的state对象 ======== 注意看这里 ========= 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数...
Vuex 上
weixin_44364028的博客
07-12 396
1. Vuex 1.1. Vuex的核心思想 1.1.1. 流程 1.2. 基本模板 1.3. state 1.3.1. 如何设置state 1.3.2. 如何在组件中使用state 1.3.2.1. 直接使用 1.3.2.2. 利用computed优化 1.3.2.3. 辅助函数 1.4. mutation 1.4.1. 如何创建mutation 1.4.2. 如何使用mutation 1.5. action 1.5.1. 如何创建action 1.5.2. 如何使用acti.
vuex 实现getter值赋值给vue组件里的data示例
10-16
在某些场景中，我们可能需要将Vuex中的getter获取到的值赋值给Vue组件的data属性，以便于组件内部使用。 首先，我们要了解什么是getter。在Vuex中，getter的作用类似于计算属性（computed properties）在Vue组件中...
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
12-29
更新了state值related，子组件根据该related来渲染相关新闻内容，但是页面打开的时候总是先加载子组件，子组件在渲染的时候还没有获取到更新之后的related值，即使在子组件中watch该值的变化依然不能渲染出来子组件...
在vuex中利用axios请求数据，放入组件中，组件拿不到数据
qq_51542956的博客
11-08 1065
上面主要是通过axios将dishesList请求到，然后通过mutations修改state内的dishesList。我猜测应该是异步的问题，于是用了this.$nextTick但到最后结果并没有变化。（这个并没有搞懂原因）然后在组件内通过mounted钩子，调用getDisheList,来让组件获取dishesList。下面是我的store内的js代码。到最后，利用计算属性就成功了。
vuex模块化 怎么引用state_Vuex 模块化使用详解
weixin_31102231的博客
12-31 1124
前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，今天我们...
Vuex-组件之间传递数据
weixin_48254057的博客
05-20 518
前言 假设A需要传递到B(组件之间传递数据)，在B组件刷新之后就获取不到了A传递过来的值了，是因为数据的传递是在A组件中触发了事件，数据才会传递到B组件，当你直接在B组件刷新的时候，并没有触发A组件的事件，所以就不会传递参数。 解决方法： 一、配置Vuex 首先导入Vuex依赖： npm install vuex --save 创建src/vuex/store.js文件，用来到处store实例： import Vue from 'vue' import Vuex from 'vuex'
vuex存值与取值的实例
12-13
组件内取值 computed: { value() { return this.$store.state.userData.xxx; } }, 组件内存值 methods: { fn() { this.$store.commit('setValue',xxx) } } store的matution.js中 setValue(state,xxx){ state.userData.xxx= xxx; }, store的index.js中 const state = { userData: { "xxx":{} } } 以上
js 获取数组对象中指定属性的值，然后赋值到数组里
qq_40055200的博客
07-05 2124
无
Vuex(Vue状态管理模式)
weixin_49333876的博客
05-13 250
一、初识vuex 1、关于vuex VueX是适用于在Vue项目开发时使用的状态管理工具。用来管理和维护vue项目中组件之间传递的参数，我们只需要把这些值定义在vuex中，即可在整个vue项目中使用 2、安装vuex 二、vuex中的核心内容 在vuex对象中，除了state，还有用来操作state中数据的方法集，以及对state中数据加工的方法集等等。 vuex重要的六大模块 state 存放状态、存放需要使用或加工的参数 mutations 对state成员进行操作 getters 加工sta
Vuex的同步存值与取值及异步请求
ChatYU的博客
10-11 1390
,5000)context指的是vuex的上下文通过定时器的方式展示异步请求的方法，并在提交异步请求时调用同步请求的方法fun3(){})效果展示})try {System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");System.out.println("睡醒了，继续...");
Vuex的使用看这一篇就够了
clmm_的博客
09-22 1408
<button @click="add">增加</button>
vue 通过vuex 存储值 在不同界面使用
c230704的博客
06-27 3141
通过vuex 存储 1.创建store.js文件 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { //要设置的全局访问的state对象 count: 1, //要设置的初始属性值 fid: '' //要在登录页面的记录 的fid }; const mutati...
Vue学习27----Vuex 的使用state，mutations实现多个页面数据共享
翟浩浩Android专栏
04-12 1883
vuex官网： https://vuex.vuejs.org/zh/guide/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 1.vuex解决了组件之间同一状态的共享问题 （解决了不同组件之间的数据共享） 2.组件里面数据的持久化。 小项目不部建议用vuex vuex的使用：（共享的数据） 1、安装vuex cnpm install vuex --save 2、在src目录...
vuex中state、mutation的简单使用
angel_Wang123的博客
03-28 674
在vue中我们经常要在组件中进行传值，如果组件中嵌套的层次比较多的时候咱可能就要使用vuex进行传值了。好了，我们来实现一个简单的登录功能来看一下如何使用vuex吧。 vuex官方文档中给我们提供的有五大核心概念：state、getter、mutation、action、module。state用来存放数据，getter跟computed类似可以对数据进行一些处理，mutation主要用来变更状态...
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2192
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
VUE2中组件中v-modle的值怎么传给vuex
最新发布
10-17
在Vue 2中，如果想把组件内的`v-model`绑定的数据传递到Vuex状态管理器中，通常的做法是通过事件bus或者自定义属性的方式实现数据的流动。 1. **事件总线（Event Bus）**: - 创建一个独立的事件中心` EventBus.js` - 在组件内，当`v-model`的值改变时，发射一个事件，例如 `this.$emit('update:value', newValue)` - 在父组件或者Vuex actions中监听这个事件，然后更新相应的store state ```javascript // 组件内 <template> <input v-model="localValue" @input="handleInput" /> </template> <script> export default { data() { return { localValue: '' }; }, methods: { handleInput(newValue) { this.$bus.$emit('update:state', newValue); } } }; </script> // bus.js import Vue from 'vue'; const eventBus = new Vue(); export default eventBus; // 使用 // parent-component.vue <template> <ChildComponent :value.sync="stateValue" /> </template> <script> import ChildComponent from './ChildComponent.vue'; import eventBus from '@/eventBus'; export default { components: { ChildComponent, }, computed: { stateValue() { return this.$store.state.myState; } }, watch: { stateValue(newVal) { eventBus.$on('update:state', newVal => (this.stateValue = newVal)); } } }; </script> ``` 2. **自定义属性（Props）**: - 如果组件之间的通信更为直接，可以使用`props`从父组件向子组件传递数据，然后在子组件内部修改后再通过`$emit`通知父组件。 ```javascript // ParentComponent.vue <template> <ChildComponent :myValue.sync="stateValue" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { stateValue: '' }; } }; </script> // ChildComponent.vue <template> <input v-model="myValue" @input="$emit('update:myValue', myValue)" /> </template> <script> export default { props: ['myValue'], data() { return { myValue: null }; } }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值