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

最新推荐文章于 2024-09-22 14:24:58 发布
原创 最新推荐文章于 2024-09-22 14:24:58 发布 · 6.7k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

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

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 991
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-组件之间传递数据
weixin_48254057的博客
05-20 540
前言 假设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'
vue 将数据保存到vuex中
热门推荐
tumi
11-26 2万+
在项目中遇到这样一个问题，就是在登入的时候同时需要从后台获取到左边的导航，但是如果使用h5的localStorage来保存导航信息，会出现app加载进去之后localStorage才保存进浏览器，在mounted方法中，console.log(window.localStorage.getItem('xx')打印出来是undefined，于是把数据保存到vuex中管理，以下是把数据保存到vuex中
Vuex(Vue状态管理模式)
weixin_49333876的博客
05-13 268
一、初识vuex 1、关于vuex VueX是适用于在Vue项目开发时使用的状态管理工具。用来管理和维护vue项目中组件之间传递的参数，我们只需要把这些值定义在vuex中，即可在整个vue项目中使用 2、安装vuex 二、vuex中的核心内容 在vuex对象中，除了state，还有用来操作state中数据的方法集，以及对state中数据加工的方法集等等。 vuex重要的六大模块 state 存放状态、存放需要使用或加工的参数 mutations 对state成员进行操作 getters 加工sta
vuex state 实现组件间传值
夜阑珊妖妖
08-13 722
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...
如何将从接口返回的值 存储到vuex的state的某个属性中
kairrys
04-27 2546
不知道如何开始使用vuex的小伙伴可以看这里vuex官网，文档里面有详细的使用讲解 首先我们创建好一个store和初始的state对象 ======== 注意看这里 ========= 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数...
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里的值或者sessionStorage里的值
agua001的博客
10-21 5420
很正常的一个需求： 页面首次打开到首页，在首页做是否登录的判断，如果存在cookie则自动登录，然后把token,status…等一些值存储到vuex中，首页头部我封装成组件了，然后头部里的一些内容展示是根据vuex里的值或者sessionStorage里的值去判断的。如图： 其实在里面还有一些内容的 html: <div class="userCenter_top"> <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583
VUE2中组件中v-modle的值怎么传给vuex
10-17
在Vue 2中，如果想把组件内的`v-model`绑定的数据传递到Vuex状态管理器中，通常的做法是通过事件bus或者自定义属性的方式实现数据的流动。 1. **事件总线（Event Bus）**: - 创建一个独立的事件中心` EventBus.js`...
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":{} } } 以上
Vuex 上
weixin_44364028的博客
07-12 419
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.
js 获取数组对象中指定属性的值，然后赋值到数组里
qq_40055200的博客
07-05 2160
无
Vuex的同步存值与取值及异步请求
ChatYU的博客
10-11 1432
,5000)context指的是vuex的上下文通过定时器的方式展示异步请求的方法，并在提交异步请求时调用同步请求的方法fun3(){})效果展示})try {System.out.println("模拟异步情况，睡眠6秒，不能超过10秒，axios超时时间设置的是10秒！");System.out.println("睡醒了，继续...");
vue 通过vuex 存储值 在不同界面使用
c230704的博客
06-27 3159
通过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 1907
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 704
在vue中我们经常要在组件中进行传值，如果组件中嵌套的层次比较多的时候咱可能就要使用vuex进行传值了。好了，我们来实现一个简单的登录功能来看一下如何使用vuex吧。 vuex官方文档中给我们提供的有五大核心概念：state、getter、mutation、action、module。state用来存放数据，getter跟computed类似可以对数据进行一些处理，mutation主要用来变更状态...
Vuex的使用看这一篇就够了
clmm_的博客
09-22 1501
<button @click="add">增加</button>
解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function...
weixin_30908103的博客
02-23 2204
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。 Vue 的状态管理工具 Vuex 完美的解决了这个问题。 看了下vuex的官网，觉得...
vue2取子组件表单上的值并且传到父组件
最新发布
12-03
在Vue2中，获取子组件表单的值并传递到父组件可以采用以下几种常见方法： ### 通过自定义事件 子组件在表单数据发生变化或者需要提交时，触发自定义事件，并将表单数据作为参数传递给该事件。父组件监听子组件的自定义事件，在事件处理函数中接收表单数据。 示例代码如下： ```vue <!-- 子组件 --> <template> <form @submit.prevent="submitForm"> <input v-model="formData.name" placeholder="姓名"> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { formData: { name: '' } }; }, methods: { submitForm() { this.$emit('formSubmitted', this.formData); } } }; </script> <!-- 父组件 --> <template> <div> <ChildForm @formSubmitted="handleFormSubmit" /> <p>接收到的表单数据: {{ receivedFormData }}</p> </div> </template> <script> import ChildForm from './ChildForm.vue'; export default { components: { ChildForm }, data() { return { receivedFormData: {} }; }, methods: { handleFormSubmit(formData) { this.receivedFormData = formData; } } }; </script> ``` ### 使用Vuex 如果项目中使用了Vuex，可以将子组件表单的数据存储到Vuex的状态中，父组件从Vuex中获取这些数据。 示例代码如下： ```vue <!-- 子组件 --> <template> <form @submit.prevent="submitForm"> <input v-model="formData.name" placeholder="姓名"> <button type="submit">提交</button> </form> </template> <script> import { mapMutations } from 'vuex'; export default { data() { return { formData: { name: '' } }; }, methods: { ...mapMutations(['updateFormData']), submitForm() { this.updateFormData(this.formData); } } }; </script> <!-- 父组件 --> <template> <div> <ChildForm /> <p>接收到的表单数据: {{ formData }}</p> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState(['formData']) } }; </script> // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { formData: {} }, mutations: { updateFormData(state, data) { state.formData = data; } } }); ``` ### 通过$parent和$children（不推荐） 这种方式直接访问父组件或子组件的实例，耦合性较高，不利于代码的维护和扩展，一般不推荐使用。 示例代码如下： ```vue <!-- 子组件 --> <template> <form @submit.prevent="submitForm"> <input v-model="formData.name" placeholder="姓名"> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { formData: { name: '' } }; }, methods: { submitForm() { this.$parent.receiveFormData(this.formData); } } }; </script> <!-- 父组件 --> <template> <div> <ChildForm /> <p>接收到的表单数据: {{ receivedFormData }}</p> </div> </template> <script> import ChildForm from './ChildForm.vue'; export default { components: { ChildForm }, data() { return { receivedFormData: {} }; }, methods: { receiveFormData(formData) { this.receivedFormData = formData; } } }; </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值