Vuex之理解state的用法实例

1.什么是state？

上一篇文章说了，Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。

响应书存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。

2.局部状态

获取：在Vue组件中获取数据，最直接的可以通过计算属性中获取；

组件仍然可以保存局部状态：虽然说Vuex的Store仓库让我们同一管理数据变得更加方便，但是代码一多也会变得冗长，有些组件的数据是自己严格自用，我们可以将state放在组件自身，作为局部数据，专供此组件使用，其他的组件不能用。

3.mapState

mapState的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，this.$store.state。

使用示例

 import {mapState} from 'vuex'
 export default {
 computer :
 mapState({
  count: state => state.count,
  'count' // 映射 this.count 为 store.state.count
 })
}

看看源码

export function mapState (states) {
  const res = {}  //定义一个对象
  normalizeMap(states).forEach(({ key, val }) => {
  // normalizeMap（）函数初始化states数据
     res[key] = function mappedState () {
      return typeof val === 'function'
      // 判断val是否是函数
      ? val.call(this, this.$store.state, this.$store.getters)
      // 若val是函数，将store的state和getters作为参数，返回值作为mapped State的返回值
      : this.$store.state[val]}})
    return res // 返回的是一个函数
  }
//初始化方法
 function normalizeMap (map) {
    return Array.isArray(map) //判断state是否是数组
    ? map.map(key => ({ key, val: key }))
    // 是数组的话，调用map方法，将每一个数组元素转换成{key,val:key}
    : Object.keys(map).map(key => ({ key, val: map[key] }))
    // 否则就是对象，遍历对象，将每一个val变成val:key
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

  • Vuex之理解state的用法实例

    1.什么是state? 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新.(这里"状态"="数据"),也就是是说数据和视图是同步的. 2.局部状态 获取:在Vue组件中获

  • Vuex之理解Mutations的用法实例

    1.什么是mutations? 上一篇文章说的getters是为了初步获取和简单处理state里面的数据(这里的简单处理不能改变state里面的数据),Vue的视图是由数据驱动的,也就是说state里面的数据是动态变化的,那么怎么改变呢,切记在Vuex中store数据改变的唯一方法就是mutation! 通俗的理解mutations,里面装着一些改变数据方法的集合,这是Veux设计很重要的一点,就是把处理数据逻辑方法全部放在mutations里面,使得数据和视图分离. 2.怎么用mutation

  • Vuex之理解Getters的用法实例

    1.什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 2.如何使用 定义:我们可以在store中定义getters,第一个参数是state const getters = {sty

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)

    在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的

  • Vuex拿到state中数据的3种方式与实例剖析

    目录 Ⅰ.Vuex 简介: 1.Vuex 是什么? 2.Vuex 的图例讲解: 3.Vuex 的配置过程: Ⅱ.如何引入并使用 Vuex : Ⅲ.实例剖析在 App.vue 中使用 state 的过程: Ⅳ.小结: Ⅰ.Vuex 简介: 1.Vuex 是什么? 答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式: 而所谓状态就是指:组件中所维护的数据); (简而言之:就是状态管理,解决复杂组件数据通信,状态共享:) 2.Vuex 的图例讲解: 其一.对 Vue Component

  • vuex操作state对象的实例代码

    Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vue有五个核心概念,state, getters, mutations, actions, modules. 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以

  • web前端vue之vuex单独一文件使用方式实例详解

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用.上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个

  • Vuex中的State使用介绍

    Vuex中的State使用介绍

    现在在上一篇为什么要使用Vuex的介绍理解基础上使用Vuex中的State,一个正面例子来证实,同时也介绍一下Vue核心概念State. Vuex 使用单一状态树--是的,用一个对象就包含了全部的应用层级状态.至此它便作为一个"唯一数据源 (SSOT)"而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突--在后面的章节里我们会讨论如何将状态和状态变

  • vuex actions异步修改状态的实例详解

    actions异步修改状态与mutations同步修改状态是两个容易混淆的概念,因为两者在执行上,很难测试出两者的差别,而我们要区别它们两,首先你得区分同步与异步,我的理解是,同步更像是一条流水线作业,而异步则更像是多条,例子你比如打电话,我们通常是我打给我妈,打完之后,再跟我爸打,而异步更像是某聊天工具,你既可以跟你爸聊,又可以跟你妈聊,你跟你妈聊可以在你爸的后面,也可以在他前面,你爸也是 而actions与mutations的区别就在此,mutations是你进行用百度钱包买一件商品时,你必

随机推荐