vuex----------state的基础用法
先使用vue cli构建一个自己的vue项目
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
export default store
现在所有的状态,也就是变量都放到了test.js中,那我们组件怎么才能获取到状态修值呢?这里有两个步骤需要操作
1, vue 提供了注入机制,就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue 构造函数,然后在所有的子组件中,this.$store 来指向store 对象。在test.js 中,我们export store, 把store已经暴露出去了,new Vue() 在main.js中,所以直接在main.js 中引入store 并注入即可。
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
2, 在子组件中,用computed 属性, computed 属性是根据它的依赖自动更新的。所以只要store中的state 发生变化,它就会自动变化。在display.vue 中作下面的更改, 子组件中 this.$store 就是指向store 对象。我们把 test.js 里面的count 变为8, 页面中就变为了8。
<template>
<div>
<h3>Count is {{count}}</h3>
</div>
</template> <script>
export default {
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
3, 通过computed属性可以获取到状态值,但是组件中每一个属性(如:count)都是函数,如果有10个,那么就要写10个函数,且重复写10遍return this.$store.state,不是很方便。vue 提供了 mapState 函数,它把state 直接映射到我们的组件中。
当然使用mapState 之前要先引入它。它两种用法,或接受一个对象,或接受一个数组。还是在display.vue 组件下。
对象用法如下:
<script>
import {mapState} from "vuex"; // 引入mapState export default {
// 下面这两种写法都可以
computed: mapState({
count: state => state.count // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁
count: 'count' // 'count' 直接映射到state 对象中的count, 它相当于 this.$store.state.count,
})
}
</script>
数组的方法如下:
<script>
import {mapState} from "vuex"; export default {
computed: mapState([ // 数组
"count"
])
}
</script>
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
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-3"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-3"],
"plugins": ["istanbul"]
}
}
}
display.vue 组件更改后
<template>
<div>
<h3>Count is {{count}}</h3>
<p>组件自己的内部计算属性 {{ localComputed }}</p>
</div>
</template> <script>
import {mapState} from "vuex";
export default {
computed: {
localComputed () {
return this.count + 10;
},
...mapState({
count: "count"
})
}
}
</script>
把test.js 中state.count 改为10, 查看一个效果
vuex----------state的基础用法的更多相关文章
- elasticsearch安装与基础用法
来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...
- Docker 安装和基础用法
理解Docker(1):Docker 安装和基础用法 本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 ...
- Vuex中mapState的用法
Vuex中mapState的用法 今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue ...
- Docker基础用法篇
Docker基础用法篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装docker 1>.依赖的基础环境 64 bits CPU Linux Kerner 3.10+ ...
- PropertyGrid控件由浅入深(二):基础用法
目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...
- logstash安装与基础用法
若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...
- BigDecimal最基础用法
BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Smarty基础用法
一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...
- 前端自动化测试神器-Katalon的基础用法
前言 最近由于在工作中需要通过Web端的功能进行一次大批量的操作,数据量大概在5000左右,如果手动处理, 完成一条数据的操作用时在20秒左右的话,大概需要4-5个人/天的工作量(假设一天8小时的工作 ...
随机推荐
- bzoj2558
哈希+拓扑排序 题意比较绕,先开始没看懂就看了发程序,发现好像理解的不太一样,后来找到了一个题目解释... 摘自jcvb:其实就是说颜色相同且三个出口分别对应相同(注意有可能是合并后才相同)两个结点是 ...
- spring-boot-configuration-processor的作用
spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 先引入pom依赖 <d ...
- java io 读取写文件
java 读取txt文件,汉字乱码,原因是因为文件的编码格式和程序编码采用了不同的编码格式.通常,假如自己不修改的话,windows自身采用的编码格式是gbk(而gbk和gb2312基本上是一样的编码 ...
- magento “Model collection resource name is not defined” 错误
问题出现于使用Grid时,解决方案.在使用的Model处添加 public function _construct() { parent::_construct(); $this->_init( ...
- .net中RSA加密解密
1.产生密钥: private static void CreateKey() { using (RSACryptoServiceProvider rsa = new RSACryptoService ...
- JDK API文档下载
java SE 8 API文档:http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-21331 ...
- Java编程思想读书笔记_第7章
final关键字类似const: import java.util.*; public class FinalData { static Random rand = new Random(47); f ...
- 下载github项目
两种方法:通过https或者ssh地址 找一个放置项目的文件夹,右键git bash here 输入 $ git clone https://项目地址 通过https 项目地址可以直接复制网页地址,或 ...
- Angular——自定义过滤器
基本介绍 除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器,通过模块对象实例提供的filter方法自定义过滤器. 基本使用 (1)input是将绑定的数据以参数的形式传入 (2)i ...
- JS实现LOGO像雪花一样落下特效
<HTML><HEAD><TITLE>LOGO从上落下</TITLE> <SCRIPT language=JavaScript> //窗口改 ...