位置: IT常识 - 正文

Vuex 之一:3种拿到 state 中数据的方式与实例剖析(vuex详解和用法)

编辑:rootadmin
Vuex 之一:3种拿到 state 中数据的方式与实例剖析 Ⅰ、Vuex 简介:

推荐整理分享Vuex 之一:3种拿到 state 中数据的方式与实例剖析(vuex详解和用法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex 实现,vuex怎么用,vuex使用教程,vuex使用教程,vuex简单使用,vuex使用流程,vuex详解和用法,vuex使用的大致步骤,内容如对您有帮助,希望把文章链接给更多的朋友!

1、Vuex 是什么?

答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式; 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据通信,状态共享;)

2、Vuex 的图例讲解: 其一、对 Vue Components 的理解: Vue Components 是指:一个组件(如:compA.vue);

其二、对 State 的理解: State 是指:存放数据的(数据最终是展示(render)在组件的模板(视图)中);

其三、对 Mutations 的理解: Mutations 是指:用来存放修改方法的(且是同步的); 且 Vue Components 可以通过 commit 来修改 Mutations;

其四、对 Actions 的理解: Actions 是指:用来放异步操作的(如:ajax 请求); 且 Vue Components 可以通过 dispatch 派发 Action 的异步请求; 同时: Action 可以直接获取接口: Backend API, 或通过 Commit 来修改 Mutations 从而修改 State 数据;

3、Vuex 的配置过程:

其一、选择并下载 Vuex 版本的过程中: 注意:Vue2 是与 Vuex3相匹配的,而 Vue3 是与 Vuex4 相匹配的;

其二、打开终端并输入命令: npm i vuex@3

Ⅱ、如何引入并使用 Vuex :

1、用 vue-cli 创建项目;

2、在 src 下建一个 store 文件夹并创建 index.js 文件;

其一、建成的文件夹如下所示:

其二、index.js 里面引入的 vuex 的代码为:

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // 注意:一定要用 Vue.use() 注册一下;const store = new Vuex.Store({ /* 此时的 Vuex.Store 就是一个构造函数(即:相当于一个实例); */ // 定义状态的地方; state: { num: 1, school: { name: 'xuexiqianduan', age: 26 } },})export default store// 此时是导出 store 文件,便于挂载;

3、要在 main.js 文件中挂载一下:

import Vue from 'vue'import App from './App.vue'import store from './store'Vue.config.productionTip = falsenew Vue({ store, /* 挂载到实例完成后,在 vue 项目的任何地方就都可以使用 store */ render: h => h(App),}).$mount('#app')Vuex 之一:3种拿到 state 中数据的方式与实例剖析(vuex详解和用法)

4、然后在 App.vue 中使用;

Ⅲ、实例剖析在 App.vue 中使用 state 的过程:

1、方式一:通过 $store.state.num 拿到数据;

其一、 此时的 App.vue 的代码为:

<template> <div id="app"> <h1>真实用法:展示Vuex中的State</h1> <p>方式一: num: {{ $store.state.num }}</p> <!-- '$store'就是指:拿到已经挂载到实例上的 store 下的 index.js 的内容; --> </div></template><script>export default { computed: { }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为: (即:已成功拿到了 index.js 中的 num 值;)

2、方式二:通过 {{ num }} 拿到数据;

其一、 此时的 App.vue 的代码为:

<template> <div id="app"> <h1>真实用法:展示Vuex中的State</h1> <p>方式二: num: {{ num }}</p> </div></template><script>export default { computed: { num() { return this.$store.state.num; }, }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为: (即:已成功拿到了 index.js 中的 num 值;)

3、方式三:通过 {{ num }} {{school.name}} 拿到数据;

其一、 此时的 App.vue 的代码为:

<template> <div id="app"> <h1>真实用法:展示Vuex中的State</h1> <p>方式三:num: {{ num }} school: {{ school.name }}</p> </div></template><script>import {mapState} from 'vuex'export default { computed: { ...mapState(['num','school']), // 该函数内部运行的返回值大致为:{num: () => this.$store.state.num, school: () => this.$store.state.school} } }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

其二、页面的展示效果为:

其三、而此时 index.js 中的 num 的值为: (即:已成功拿到了 index.js 中的 num 值;)

Ⅳ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流! 其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文链接地址:https://www.jiuchutong.com/zhishi/296210.html 转载请保留说明!

上一篇:imu内参标定(内外参标定)

下一篇:PHP开发制作一个简单的活动日程表Calendar(php开发项目)

  • 华为p40是挖孔屏吗(华为p40挖孔屏会遮挡视频吗)

    华为p40是挖孔屏吗(华为p40挖孔屏会遮挡视频吗)

  • qq说说照片怎么可以打不开(QQ说说照片怎么加水印)

    qq说说照片怎么可以打不开(QQ说说照片怎么加水印)

  • 微信间歇性收不到信息(微信间歇性收不到消息)

    微信间歇性收不到信息(微信间歇性收不到消息)

  • 闲鱼9是什么意思(闲鱼是什么意思呢)

    闲鱼9是什么意思(闲鱼是什么意思呢)

  • 手机电量跑得快怎么处理(手机电量跑得快从哪里看我开了什么)

    手机电量跑得快怎么处理(手机电量跑得快从哪里看我开了什么)

  • 苹果x手机充电发热怎么回事(苹果X手机充电口接触不良)

    苹果x手机充电发热怎么回事(苹果X手机充电口接触不良)

  • 个人抖音号可以开通企业认证吗(个人抖音号可以开通橱窗吗)

    个人抖音号可以开通企业认证吗(个人抖音号可以开通橱窗吗)

  • 群聊超过200人怎么扫码进群(群聊超过200人怎么做成链接)

    群聊超过200人怎么扫码进群(群聊超过200人怎么做成链接)

  • 淘宝买家付款后卖家多久能收到钱(淘宝买家付款后自动核对地址)

    淘宝买家付款后卖家多久能收到钱(淘宝买家付款后自动核对地址)

  • oppoa92s是闪充吗(oppoa92s是快充吗)

    oppoa92s是闪充吗(oppoa92s是快充吗)

  • arxiv是什么(arxiv是什么数据库)

    arxiv是什么(arxiv是什么数据库)

  • 480p分辨率是多少像素(分辨率480p是什么意思)

    480p分辨率是多少像素(分辨率480p是什么意思)

  • 双卡能放两张移动卡吗(双卡手机能放两张移动卡吗)

    双卡能放两张移动卡吗(双卡手机能放两张移动卡吗)

  • win10正在准备windows要多久(win10正在准备windows请勿关闭计算机要多久)

    win10正在准备windows要多久(win10正在准备windows请勿关闭计算机要多久)

  • 电脑连续开机多久需要休息(电脑连续开机多久会损坏电脑)

    电脑连续开机多久需要休息(电脑连续开机多久会损坏电脑)

  • word页边距怎么设置(word页边距怎么只设置一页)

    word页边距怎么设置(word页边距怎么只设置一页)

  • 戴尔笔记本怎么截图(戴尔笔记本怎么用u盘重装系统)

    戴尔笔记本怎么截图(戴尔笔记本怎么用u盘重装系统)

  • 华为生活服务用处大吗(华为生活服务用可以卸载不受影响)

    华为生活服务用处大吗(华为生活服务用可以卸载不受影响)

  • 手机b站怎么举报视频(b站app怎么举报)

    手机b站怎么举报视频(b站app怎么举报)

  • 手机怎么看淘宝号有几颗心(手机怎么看淘宝店铺开了多久)

    手机怎么看淘宝号有几颗心(手机怎么看淘宝店铺开了多久)

  • 拍抖音视频怎么配音乐(拍抖音视频怎么赚钱)

    拍抖音视频怎么配音乐(拍抖音视频怎么赚钱)

  • inaccessibleboot蓝屏(inaccessibleboot蓝屏解决方法)

    inaccessibleboot蓝屏(inaccessibleboot蓝屏解决方法)

  • 埃克斯穆尔国家公园斯托克佩罗公地,英国英格兰 (© David Noton/Alamy)(埃莫尔斯)

    埃克斯穆尔国家公园斯托克佩罗公地,英国英格兰 (© David Noton/Alamy)(埃莫尔斯)

  • JavaScript charCodeAt() 方法

    JavaScript charCodeAt() 方法

  • 防伪税控系统专用设备
  • 个人所得税申报错误如何更正申报
  • 期间损益结转错误怎么冲销
  • 在建工程处置通过固定资产清理吗
  • 用友u8如何计提折旧生成凭证
  • 合并报表的抵消分录要做账吗
  • 土地投资入股是否需要发票作为企业所得税税前扣除凭证
  • 应税服务零税率是什么
  • 公司并购股权转让协议
  • 小规模纳税人工资可以抵扣增值税吗
  • 开具的增值税发票丢失最新处理办法
  • 税局税种认定
  • 税务会计学知识点
  • 如何降低房租
  • 企业间借款利息开票税目
  • 票据再质押
  • 定期定额怎么报税
  • 话费打印发票怎么缩小
  • window10开始菜单
  • linux中压缩
  • 商业承兑汇票分为哪两种
  • 贴现利息由谁承担
  • vue print nb 教程
  • 企业所得税若干问题
  • 富山和富士山
  • 置换土地如何做账务处理
  • 金融企业利息收入增值税
  • 软件是无形的,可见的物理实体
  • 蓝色向日葵
  • js fetch api
  • html中的标签有哪些
  • postman密码
  • chmod命令用于更改文件或目录的所有者
  • mzip命令 控制磁盘驱动器
  • 新企业所得税季初资产总额怎么填
  • 帝国cms使用手册
  • java中的常量是什么意思
  • 销售额包括哪些会计科目
  • 纳税人遗失税务登记证件并按照规定
  • 为什么实收资本是贷方
  • 子公司借钱给母公司,未收取利息,要纳税吗
  • 电子承兑提示付款提前几天
  • 哪些属于政府机关单位
  • sql server怎么用sql语句创建数据库
  • 电费为什么计入其他应付款
  • 小规模纳税人每月不超过10万
  • 加油站充值套路
  • 印花税根据不同的税目,分别采用
  • 购进材料,已付,材料尚未验收入库
  • 税控维护费减免税款
  • 影院会计有前景吗
  • 企业材料物资的采购费用包括
  • 基于存储过程的计算
  • mysql5.7.19下载
  • wp程序
  • win8如何清空电脑里的所有东西
  • windows10周年更新
  • 双linux系统
  • nod32kui.exe - nod32kui是什么进程 作用是什么
  • win8怎么创建宽带连接
  • 在linux系统中有一个重要的概念
  • win7电脑耳机插上还是外放
  • ,linux
  • cocos2dx 2.2.2
  • js筛选器
  • html中清除浮动的关键代码
  • shell脚本监控进程
  • 创建网元
  • python编程
  • jquery滚动条滚动到指定位置
  • python怎么用命令行
  • jquerycuishifeng
  • actionbar如何添加按钮
  • 上饶县国税局局长名单
  • 财政部国家税务总局
  • 金税盘显示证书口令错误
  • 分国分项抵免法
  • 跨省开税票
  • 季度预缴申报表在哪里查询
  • 合肥哪里可以注销电信卡
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设