Vuex 之一:3种拿到 state 中数据的方式与实例剖析
Ⅰ、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')
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
Vuex 之一:3种拿到 state 中数据的方式与实例剖析相关推荐
- Vuex 之二:3种拿到 state 中数据并执行 getters 中方法的过程与实例剖析
Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据 ...
- OpenCV学习笔记(二):3种常用访问图像中像素的方式
OpenCV学习笔记(二):3种常用访问图像中像素的方式 #include <opencv2/opencv.hpp>using namespace cv; using namespace ...
- 视图中获取控制器中数据的方式
在视图中获取控制器中数据的方式有两种: 一种是在控制器的操作中渲染视图时候分配模板数据,这种方式叫推送. 另外一种是在视图中手动获取控制器中的数据,包括控制器中的属性和方法及控制器id,通过$this ...
- 【机器学习基础】kaggle竞赛中数据抽样方式
什么情况下需要会用到抽样 数据量太大,计算能力不足. 抽样调查,小部分数据即可反应全局情况. 时效要求,通过抽样快速实现概念验证. 定性分析的工作需要. 无法实现全覆盖的场景,比如满意度调查等. 解决 ...
- Java中数据存储方式
2019独角兽企业重金招聘Python工程师标准>>> 1. 寄存器(register).这是最快的存储区,因为它位于不同于其他存储区的地方--处理器内部.但是寄存器的数量极其有限, ...
- java 排序方法详解_java中关于排序方式的实例讲解
冒泡排序 特点:效率低,实现简单 思想(从小到大排):每一趟将待排序序列中最大元素移到最后,剩下的为新的待排序序列,重复上述步骤直到排完所有元素.这只是冒泡排序的一种,当然也可以从后往前排.publi ...
- EBS Form中数据提交方式(COMMIT)
commit 对 f o rm 和数据库进行提交,如果 form 上面的数据和代码中的数据变动有冲突,最后以 FORM 上的为准. 适用情况:一般来在直接使用 DML 代码修改数据时,就使用 comm ...
- ios中数据存储方式
以上三种不能存储大批量数据 plist只能先取出来 里面的数据 覆盖存储 SQLLite3 数据库 纯C语言 轻量级 CoreData 基于SQLLite3 OC版本 重量级 大批量数据缓存 SQL ...
- Excel:用宏批量更改数据透视表中数据汇总方式
有时Excel数据透视表中的值字段较多,我这有64个值字段,因为数据默认汇总方式是"求和".如果要全部更改其汇总方式,如将下图数据透视表中所有值字段的汇总方式由"求和&q ...
最新文章
- ABAP 在程序中启动后台JOB
- html text width,HTML5 Text Canvas rotate in case text width is larger than maximum width allowed
- 第三次学JAVA再学不好就吃翔(part81)--去除ArrayList中重复元素
- jsf集成spring_JSF 2,PrimeFaces 3,Spring 3和Hibernate 4集成项目
- Android使用Application的好处
- julia语言 调用 java_以编程方式/动态导入Julia中的模块
- JavaScript Tip之:用和||来模拟if-else
- 采用dlopen、dlsym、dlclose加载动态链接库【转】
- Mat矩阵和数组的运算
- 精益标准工时软件VIOOVI:没有标准工时,别谈精益改善!
- 代码整洁之道-编写 Pythonic 代码
- 《SQL基础教程》((日)MICK)PDF
- 自然辩证法与计算机科学的关系,自然辩证法和科学技术有什么关系
- c语言五子棋最简单的ai,C++简单五子棋的AI设计实现
- pd调节规律_PD 控制规律的特点是具有超前控制功能。( )
- C语言递归函数实现十位数转换进制并打印出来(超详细)
- PR2019中对基本图形mogrt文件进行文件夹分类不再混乱
- [导入]《玫瑰人生》【第80届奥斯卡获奖大片】【DVD中英字幕】【14:50发布】
- Qt 加载图片文件路径详解
- 十大盗版软件你用了几个?
热门文章
- 港大禁用 ChatGPT 等 AI 工具,网友:“从万众瞩目到千夫所指?”
- java中的toarray_java中的toArray()
- Java使用Ajax图片上传与修改
- JDK8之Comparator
- python在手机上如何模拟登录_用 Python 换个姿势「模拟登录」
- 菜鸟vimer成长记——第2.1章、normal模式
- python里面的内置函数_【python】函数之内置函数
- php的sleep函数,php中的sleep()函数
- 吸血鬼数字(多种解法)
- 30分钟搞懂 HTTP 缓存