java写mapstate算子,vuex state及mapState的基础用法详解
vuex state及mapState的基础用法详解
2019-01-07
编程之家收集整理的这篇文章主要介绍了vuex state及mapState的基础用法详解,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
搜索热词
先使用vue cli构建一个自己的vue项目
1.npm i -g vue-cli
2.vue init webpack sell (sell是你的项目名)
3.一路回车(在这个过程中会提示你是否安装一些依赖包,比如vue-router,es6语法检查等等,这些根据你个人习惯或者癖好选择Y/N)
4.npm i (这个是安装项目的依赖包)
5.npm run dev(启动你的vue项目) 这个时候如果在页面上看到了vue的logo说明你的vue的项目基础构建已经完成,然后你可以删除掉没有用的组件
6.webpack sell默认没有安装vuex,所以要安装vuex; 在命令行中按两次ctrl+c 结束服务器,npm install vuex –save 安装vuex.
7.在你的src目录下新建一个vue的组件,我们姑且命名为helloVuex(这个命名你自己随意,开心就好)这个组件主要用来做主容器只展示内容
8.接着新建一个随便叫什么鬼的组件(这里我就叫display组件吧)用来接受state中的状态
9.下来我们在src目录下新建一个文件夹叫做store,在store下面新建一个js文件,叫做test.js(这里的store就是我们的前端数据仓库)用vuex 进行状态管理,store 是vuex的核心,所以命名为store 在src 目录下新建store 文件,在store 目录下新建test.js 文件(如下)。可以看到使用vuex 之前,要告诉 vue 使用它,Vue.use(Vuex); 我们这里只有一个变量count 需要管理,所以在创建 store 对象的时候,给构造函数传参,state 下面只有一个count,且初始化为0。
现在所有的状态,也就是变量都放到了test.js中,那我们组件怎么才能获取到状态修值呢?这里有两个步骤需要操作
1, vue 提供了注入机制,就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue 构造函数,然后在所有的子组件中,this.$store 来指向store 对象。在test.js 中,我们export store,把store已经暴露出去了,new Vue() 在main.js中,所以直接在main.js 中引入store 并注入即可。
',components: { App }
})
2, 在子组件中,用computed 属性,computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化,它就会自动变化。在display.vue 中作下面的更改, 子组件中 this.$store 就是指向store 对象。我们把 test.js 里面的count 变为8,页面中就变为了8。
Count is {{count}}
3, 通过computed属性可以获取到状态值,但是组件中每一个属性(如:count)都是函数,如果有10个,那么就要写10个函数,且重复写10遍return this.$store.state,不是很方便。vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。
当然使用mapState 之前要先引入它。它两种用法,或接受一个对象,或接受一个数组。还是在display.vue 组件下。
对象用法如下:
import {mapState} from "vuex"; // 引入mapState
export default {
// 下面这两种写法都可以
computed: mapState({
count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state,然后通过state 直接获取它的属性更简洁
count: 'count' // 'count' 直接映射到state 对象中的count,它相当于 this.$store.state.count,})
}
数组的方法如下:
import {mapState} from "vuex";
export default {
computed: mapState([ // 数组
"count"
])
}
4,还有最后一个问题,如果我们组件内部也有computed 属性怎么办?它又不属于mapState 中。那就用到了对象分割,把mapState函数生成的对象再分割成一个个的,就像最开始的时候,我们一个一个罗列计算属性,有10个属性,我们就写10个函数。
es6中的... 就是分割用的,但是只能分割数组。在ECMAScript stage-3 阶段它可以分割对象,所以这时还要用到babel-stage-3; npm install babel-preset-stage-3 --save-dev,安装完全后,一定不要忘记在babelrc 就是babel 的配置文件中,写入stage-3,
否则一直报错。在页面中添加个 p 标签,显示我们组件的计算熟悉
babelrc
display.vue 组件更改后
Count is {{count}}
组件自己的内部计算属性 {{ localComputed }}
把test.js 中state.count 改为10,查看一个效果
下面看下Vuex中mapState的用法
今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了。真是天雷滚滚~~~~~~
index.js
computed: {
...mapState([
'orderList','login'
]),},mounted(){
console.log(typeof orderList); ==>undefind
console.log(typeof this.orderList)==>object
}
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
所以通过this都能将这些对象点出来,同理,mapActions,mapMutations都是一样的道理。牢记~~~
总结
以上所述是小编给大家介绍的vuex state及mapState的基础用法详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
java写mapstate算子,vuex state及mapState的基础用法详解相关推荐
- java 生成dump_java dump文件怎么生成和分析-JMAP用法详解
jmap是java自带的工具 1. 查看整个JVM内存状态 jmap -heap [pid] 2. 查看JVM堆中对象详细占用情况 jmap -histo [pid] 3. 导出整个JVM 中内存信息 ...
- java设计模式观察者模式吗_Java设计模式之观察者模式原理与用法详解
Java设计模式之观察者模式原理与用法详解 本文实例讲述了Java设计模式之观察者模式原理与用法.分享给大家供大家参考,具体如下: 什么是观察者模式 可以这么理解: 观察者模式定义了一种一对多的依赖关 ...
- java写dnf外掛_dnf卡盟_Java的泛型详解(一)
Java实现DDD中UnitOfWorkdnf卡盟 Java的泛型详解 泛型的利益 编写的代码可以被差别类型的工具所重用. 由于上面的一个优点,泛型也可以削减代码的编写. 泛型的使用 简朴泛型类 pu ...
- java 调用cmd_java打开本地应用程序(调用cmd)---Runtime用法详解
有时候我们需要借助java程序打开电脑自带的一些程序,可以直接打开或者借助cmd命令窗口打开一些常用的应用程序或者脚本,在cmd窗口执行的命令都可以通过这种方式运行. 例如: packagecn.xm ...
- android java 写文件操作_Android编程之文件的读写实例详解
本文实例分析了Android编程之文件的读写方法.分享给大家供大家参考,具体如下: Android的文件读写与JavaSE的文件读写相同,都是使用IO流.而且Android使用的正是JavaSE的IO ...
- java构造方法 this_Java中的构造方法this、super的用法详解
1.构造方法 定义:与类同名没有返回值的方法称为构造方法: public class test1 { private String name; private int age; public test ...
- java 构造 super_Java中的构造方法this、super的用法详解
1.构造方法 定义:与类同名没有返回值的方法称为构造方法: public class test1 { private String name; private int age; public test ...
- java中printf,print,println,区别及用法详解
此题是蓝桥杯的一道竞赛试题,在编写程序时,遇到了printf的用法,不是很熟悉,特此总结一下. 以下是对Java中print.printf.println的区别进行了详细的分析介绍,需要的朋友可以过来 ...
- java中截取部分字符串_JAVA中截取字符串substring用法详解
substring public String substring(int beginIndex) 返回一个新的字符串,它是此字符串的一个子字符串.该子字符串始于指定索引处的字符,一直到此字符串末尾. ...
最新文章
- boost log 能不能循环覆盖_前端基础进阶(十四):深入核心,详解事件循环机制...
- 如何正确对待vb脚本里的session
- QML基础类型之list
- 摸透 Redis 主从复制、哨兵、Cluster 三种模式
- python第三方库安装的各种方法(全网最全,最简单易懂)
- 新手攻略熔炉_【新手攻略】快速入门
- Shell(bash) 介绍
- mysqlfor循环中出错继续_运维大佬教你“打僵尸”——处理Linux系统中大量的僵尸进程(2)...
- 穷人怎么慢慢打破阶层?做到这2点,活出最真实的样子,别表演!
- Map 3D中通过程序删除图层及数据源
- 神策数据推荐系统:中文关键词提取新模型
- C语言字符串类型转换为整型,c语言中将一个字符串转换到整型数据类型的函数是什么?...
- ELK详解(十四)——Logstash TCP/UDP日志收集
- python之常用的数据类型
- )C# Enum,Int,String的互相转换 枚举转换
- Django思维导图-模板
- command not found: npm
- Ubuntu系统电池管理软件TLP(Thinkpad设置电池充电阈值)
- 谷歌浏览器里部分字体变模糊的问题。
- 小型三维引擎设计实现-渲染层的设计总结