位置: 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开发项目)

  • 拼多多没有显示取件码怎么办(拼多多没有显示退货包运费就要自己出运费吗)

    拼多多没有显示取件码怎么办(拼多多没有显示退货包运费就要自己出运费吗)

  • 如何开通商户收款码(如何开通商户收款码功能)

    如何开通商户收款码(如何开通商户收款码功能)

  • 华为接电话黑屏在哪里设置取消(华为接电话黑屏怎么解决方法)

    华为接电话黑屏在哪里设置取消(华为接电话黑屏怎么解决方法)

  • 拯救者怎么进入bios(拯救者怎么进入bios设置u盘启动)

    拯救者怎么进入bios(拯救者怎么进入bios设置u盘启动)

  • miniled和oled 的区别(迷你led和oled的区别)

    miniled和oled 的区别(迷你led和oled的区别)

  • 微信消费别人能查到吗(微信消费别人能收到吗)

    微信消费别人能查到吗(微信消费别人能收到吗)

  • 内存储器包括(内存储器包括RAM和什么)

    内存储器包括(内存储器包括RAM和什么)

  • 抖音极速版刷视频一直显示很遗憾(抖音极速版刷视频一天多少钱)

    抖音极速版刷视频一直显示很遗憾(抖音极速版刷视频一天多少钱)

  • 苹果x怎么隐藏软件(苹果x怎么隐藏应用软件)

    苹果x怎么隐藏软件(苹果x怎么隐藏应用软件)

  • g1620 cpu是几代(g1620 cpu是几代内存)

    g1620 cpu是几代(g1620 cpu是几代内存)

  • 学习通第二次看视频会把总时长加上吗

    学习通第二次看视频会把总时长加上吗

  • 苹果哪些是双卡双待(苹果哪些是双卡双待5G)

    苹果哪些是双卡双待(苹果哪些是双卡双待5G)

  • 新买的电脑为什么只有c盘(新买的电脑为什么会有以前的文件夹)

    新买的电脑为什么只有c盘(新买的电脑为什么会有以前的文件夹)

  • 微信好友验证保留几天(微信好友验证有效时间是多久)

    微信好友验证保留几天(微信好友验证有效时间是多久)

  • 安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

    安卓手机微信夜间模式怎么关闭(安卓手机微信有夜间模式吗)

  • 一般用微处理器的什么进行分类(一般用微处理器的什么进行)

    一般用微处理器的什么进行分类(一般用微处理器的什么进行)

  • 小米8可不可以隐藏应用(小米8可不可以换大容量的电池)

    小米8可不可以隐藏应用(小米8可不可以换大容量的电池)

  • 怎么恢复陌陌聊天记录(怎么恢复陌陌聊天记录不用电脑)

    怎么恢复陌陌聊天记录(怎么恢复陌陌聊天记录不用电脑)

  • 苹果x相机声音怎么关(苹果x相机声音在哪里打开)

    苹果x相机声音怎么关(苹果x相机声音在哪里打开)

  • iphonex屏幕校准怎么弄(iphonexs校准屏幕)

    iphonex屏幕校准怎么弄(iphonexs校准屏幕)

  • 7p电池容量多少毫安(7p的电池)

    7p电池容量多少毫安(7p的电池)

  • 【transformers】tokenizer用法(encode、encode_plus、batch_encode_plus等等)(transformer toys)

    【transformers】tokenizer用法(encode、encode_plus、batch_encode_plus等等)(transformer toys)

  • 差额征税如何开票备注内容应该怎么调
  • 专项应付款和政府补助的区别是什么
  • 吸收合并和新设合并
  • 工程类工资表为哪些内容
  • 应收款和应付款对抵
  • 公司在筹备阶段可以不交社保
  • 国外公司税号查询
  • 调拨单可以根据哪些单据生成
  • 工业企业会计报告
  • 加工企业购入辅料记入什么科目?
  • 代扣代缴个人所得税手续费返还 增值税
  • 外贸出口退税是退出口金额的多少
  • 国税一个月没报税罚款多少
  • 企业固定资产出租取得的收入属于
  • 一般纳税人三个条件是什么
  • 附加税没有计提会计分录
  • 存款利息收入是免税还是不征税
  • 销售房地产要交培训费是传销行为吗
  • 应付工会经费 实际支付
  • 注销税务财务报表模板
  • 会计准则一般选择哪个
  • 预付账款和其他应收款可以抵消吗
  • 生产企业土地使用权摊销
  • 小规模纳税人别人开了专票怎样处理
  • 漏记的账务怎么处理
  • 开票金额比收入高怎么办
  • 微信占用空间大是怎么回事
  • 房租收入怎么做会计分录
  • windows太阳谷更新
  • live updater
  • php array_map 和 foreach性能
  • codevein配置要求
  • 工会经费零申报怎么填
  • php关闭报错
  • 小规模拍卖公司怎么开票
  • 魔改6.67
  • 数据安全数据目录
  • 开发支出的含义
  • 微擎框架开发小程序
  • 银行流水要去哪里打
  • 公允价值计量转权益法例题
  • 手工明细账簿怎么登账
  • 银行日记账怎么做账
  • 劳动法辞退员工补偿标准2023
  • 权益性投资收益按照什么确认收入的实现
  • 公司给买员工保险
  • 商业承兑汇票怎么贴现
  • 代扣代缴的增值税怎么做账
  • 公允价值变动损益
  • 运费险三件衣服分3个快递寄出
  • 承兑汇票贴现利息会计分录
  • 公司注册实收资本
  • 公司与公司之间的借款合法吗
  • 税务会计应该设什么岗位
  • mysql完整教程
  • sql中nullif
  • 系统问题怎么处理
  • 老毛桃U盘装系统综合教程
  • ubuntu配置yum
  • centos7修改远程登录端口
  • win1020h2正式版
  • mpcmdrun.exe是什么进程
  • nfs网络安装
  • 如何配置无线网络路由器
  • js domcontentloaded
  • unicode和utf–8 编码
  • nodejs连接mysql的历程
  • ps如何把图片放大缩小
  • 详解HTTPS 的原理和 NodeJS 的实现
  • javascript例题
  • javascript面向对象 第三方类库
  • 教你学python
  • 如何查询车辆购置税是否缴纳
  • 高新技术企业认定
  • 增值税进项转出补企业所得税
  • 安徽省国家税务局网
  • 车船税的缴纳证明是什么意思?
  • 地税局有实权吗
  • 收到12366的短信
  • 国家发票真伪查验
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设