写一下在vue中常用的state数据的设计,获取与设置数据。
作者:互联网
介绍:这篇文章为新手而准备,刚接触vue的小伙伴们福利到了。可能会有很多没有说到的地方,或者说错的放请见谅。或者私信我。及时回答你的难题。
学习vue,无非就是多敲多练,多看多学。类似于语法糖,如果不知道什么是语法糖的话,我这里就不多说了,想知道语法糖的话看这个地址:https://blog.csdn.net/Merlin2017/article/details/78075206。
实际上已经接触过一种在组件中获取vuex的state对象中属性的方法,即可以在插值表达式中用$store.state.count来获取。这是一种最常用的方法。
而在实际应用中,还存在着其他一些写法,最常见的有以下三种,但无论怎么写,都需要依赖vue的computed计算属性来实现。
因为在vue的实际应用中,computed属性进行计算,对data中的值进行改变,因此,我们就是利用computed的这一特性,在组件中获取vuex的state对象中的属性。
方法一:
在computed中定义一个方法,并return出state对象中的属性及其状态:
<template>
<div>
<h3>{{count}}</h3>
</div>
</template>
<script>
export default {
name:"Count",
data(){
return{
}
},
computed:{
count(){
return this.$store.state.count;
}
}
}
</script>
这里需要说明的是:因为store之前已经在mian.js中进行了全局引入,因此,在vue的组件中,就可以使用this.$store来调用,其中this代表Vue的实例(不可省略)。
方法二:
利用vuex的mapState方法来获取vuex的state对象中属性,它有两种写法:
写法1(mapState中用对象的形式获取):
首先在组件中引入vuex的mapState方法:
import { mapState } from 'vuex'
然后在computed中这样写:
computed:{
...mapState({
count:state => state.count //使用ES6的箭头函数来给count赋值
})
}
写法2(mapState中用数组的形式获取):
同样,需要先在组件中引入vuex的mapState方法:
import { mapState } from 'vuex'
然后在computed中这样写:
computed:
...mapState(['count'])
}
<template>
<div>
<h3>{{count}}</h3>
</div>
</template>
<script>
import {mapState} from 'vuex';
export default {
name:"Count",
data(){
return{
}
},
computed:{
...mapState(['count'])
}
}
</script>
上面这些就是,我所讲解的关于vue中state数据的设计,获取与设置数据。你有没有看懂呢!欢迎随时来评论。
标签:count,vue,computed,vuex,mapState,state,数据 来源: https://blog.csdn.net/qianluo111/article/details/120580021