写一下在vue中常用的state数据的设计，获取与设置数据。

2021-10-05 10:01:57 阅读：149 来源： 互联网

标签：count vue computed vuex mapState 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

写一下在vue中常用的state数据的设计，获取与设置数据。