vuex的传参使用

最新推荐文章于 2022-12-28 20:31:24 发布
最新推荐文章于 2022-12-28 20:31:24 发布
阅读量1.7k 收藏 2
点赞数
文章标签： c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/120726759
版权

项目用到过好几次vuex，有的参数复用率较高，且不是父子组件，需要服用，所以考虑用vuex来进行传参

每一个模板都有自己的templateid 

 后端要求，在用户操作的时候每一步都请求接口，且要携带该模块的templateid参数

 首先在user.js文件构造mutations实例对象

                      

在页面内，找到能拿到templateid参数的页面

 先引入mapMutations

 

 接着在methods方法中，写入该方法

需要一个抛出这个参数的实例方法，页面中没有事件触发，所以写在mounted里

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

！！！！！！！！！！！！！！！！！！！前方雷区！！！！！！！！！！！！！！！！！！！！

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

原本以为vuex参数抛出去，接收参数的页面也要引入，但是不在data里定义实例的话，会报错没有参数的实例，但是定义了以后调用方法的时候又会报错参数已经在data中存在了，就很矛盾，跟同事闲聊的时候才知道，vuex是全局管理的，参数抛出去就相当于是vue的实例 ，在页面中直接赋值调用就可以，不需要引入，下面是之前错误的示范

 在需要接收参数的页面引入

要在computed里面写入要用的参数

 在需要接收参数的方法里，拿到state里的参数

 需要注意的是，在接收页面，需要在data里构造一个实例， 不然虽然可以接收到参数，但是会报错

但是在data中定义了实例后又会报错

 所以，参数抛出去直接在接收页面用就可以了

刘大气
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【VUEX】最好用的传参方式--Vuex的详解
m0_74315688的博客
10-11 3171
vuex是什么？为什么要用它？它解决了程序员的什么问题？我们应该如何使用它？ 一篇文章解决所有问题！！！！！！！
vuex的几个属性及其使用传参
qq_55031668的博客
01-17 1533
vuex的几个属性及其使用传参
vuex组件传参
qq_53796638的博客
12-28 609
vuex基础语法
vuex传参------
m0_62782752的博客
04-15 1085
index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: { use: "gao", num: 2 }, mutations: { tongChange(state, n) { state.use = n }, t
【vue中传参方式（路由、组件、插槽和vuex）】
limuzhixing的博客
07-14 939
vue中传参方式（路由、组件、插槽和vuex）
Vue中的八种传参方式你了解多少!
lyk_xz的博客
04-24 9571
一.父传子,子传父 父传递子如何传递: (1)在父组件的子组件标签上绑定一个属性，挂载要传输的变量 (2)在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型} 子传递父如何传递 ...
详解vuex中mutation/action的传参方式
10-18
主要介绍了详解vuex中mutation/action的传参方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解使用vuex进行菜单管理
08-28
在 Vuex 中，state 和 mutations 分别对应不同的层级菜单，每个 state 都对应写了一个 mutations，实际工作中为了更大程度地减少代码复用，对于 menu 的状态管理可以只写一个 mutations，通过传参判断是更改哪个层级...
vuex 中插件的编写案例解析
01-19
一、官方文档 1、第一步 const myPlugin = store => { ...const store = new Vuex.Store({ // ... plugins: [myPlugin] }); 二、编写一个打印日志的插件 1、函数的书写 import _ from 'lodash'; function logger
Vuex之理解Getters的用法实例
01-21
1.什么是getters 在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都...传参：定义的Getters会暴露为stor
vuex能传参吗_vuex之传递参数（五）
weixin_39684967的博客
01-17 353
在vuex的方法调用用传递参数，只需要在mutations和actions相应的地方加上参数，然后调用的时候传入即可。(1)src/vuex/store.js中//actions中传递参数constmutations={ADD(state,n){state.count+=n;}}//actions中传递参数constactions={//触发mutations中相应的方法...
通过vuex传递参数并触发组件中的事件
前端开发
11-30 9260
组件A为公共组件，负责定时查询信息通知，并通过模态展示； 组件B为业务组件，负责项目中报告的编辑审核等业务流程； 用户打开组件A中的信息通知模态时，可以选择接受或拒绝处理相关通知，接受时直接打开组件B进行业务，拒绝时只刷新通知不进行其他操作。这就需要监听组件A中的事件，当用户打开通知模态点击接受时，获取组件A中所选择用户的id并触发组件B中的方法。
非父子组件使用 vuex 传参
NancyFyn的博客
06-23 249
首先要先安装 vuex npm install vuex --save 如果是修改成熟的项目，一般不需要此步骤。 在store 文件夹下创建 index.js 文件 import Vue from'vue' import Vuex from 'vuex' Vue.use(Vuex) // 创建仓库，用来存储共用的数据 export default new Vuex.stroe({ state: { appList: [], platformList: [] }， mutation
vue11Vuex解说+子父传参详细使用
全栈
11-03 8548
1. vue组件间通讯1. vue组件间通讯1.1 父子组件1.2 消息总线这种方式需要另外创建一个vue实例，用来当做消息总线1.3 vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作。：1.State：单一状态树2.Getters：状态获取3.Mutations：触发同步事件4.Actions：提交mutation，可以包含异步操作。
vuex能传参吗_详解vuex中mutation/action的传参方式
weixin_42298378的博客
01-17 498
前言在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下//vuex中的stateconst state = {...
前端面试题 | VUEX是如何传值的？
weixin_48491416的博客
03-22 1757
一、首先安装vuex,使用vuex 1.安装vuex依赖包 （npm install vuex --save） 2.新建store文件夹，创建js文件夹，引入vue实例和vuex,创建store对象，导出store 3.将store对象挂在到vue实例中 二、Vue的核心概念 state vuex中的数据源，我们需要保存的数据就保存在这 获取state中数据的方法： （一）this.$store.state （二）在组件中引入mapState import {mapSta
vue中怎么使用vuex，解决传值问题（一）
马小明啊的博客
05-24 3511
一、什么是vuex?     Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.     vuex是一个全局状态管理插件，用于解决组件之间传值的问题，使用一个全局状态树项目中的状态数据进行管理，遵循单项数据流的规范 ...
Vuex传值运用
what_to的博客
08-16 1999
Vuex传值运用Vue几个主键之间的比较Vuex是什么Vuex使用：Vuex的组成和应用 Vue几个主键之间的比较 vue中各个组件之间传值 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 2.非父子组件或父子组件 通过数据总数Bus，this.root.root.roo...
前端非父子怎么用vuex 传参？
最新发布
03-28
在前端非父子组件中使用 Vuex 传参，可以通过在组件中使用 `mapActions` 和 `mapState` 方法来获取和修改 store 中的数据，然后在需要传递参数的地方使用 `this.$store.dispatch` 方法来触发 store 中的 action，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值