当前位置：首页 > 资讯 > 技术文档

Vuex之理解state的用法实例

时间：2022-05-30 10:13 编辑：来源：阅读：
扫一扫，手机访问

摘要：Vuex之理解state的用法实例

[b]1.什么是state？[/b] [url=http://www.1sucai.cn/article/111582.htm]上一篇[/url]文章说了，[code]Vuex[/code]就是提供一个仓库，仓库里面放了很多对象。其中[code]state[/code]就是数据源存放地，对应于与一般[code]Vue[/code]对象里面的[code]data[/code]（后面讲到的[code]actions[/code]和[code]mutations[/code]对应于[code]methods[/code]）。响应书存储：[code]state[/code]里面存放的数据是响应式的，[code]Vue[/code]组件从[code]store[/code]中读取数据，若是[code]store[/code]中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。 [b]2.局部状态[/b] 获取：在[code]Vue[/code]组件中获取数据，最直接的可以通过计算属性中获取；组件仍然可以保存局部状态：虽然说[code]Vuex[/code]的[code]Store[/code]仓库让我们同一管理数据变得更加方便，但是代码一多也会变得冗长，有些组件的数据是自己严格自用，我们可以将[code]state[/code]放在组件自身，作为局部数据，专供此组件使用，其他的组件不能用。 [b]3.mapState[/b] [code]mapState[/code]的作用是把全局的 [code]state [/code]和 [code]getters [/code]映射到当前组件的 [code]computed [/code]计算属性中，[code]this.$store.state[/code]。使用示例

 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)

上一篇：vue.js如何更改默认端口号8080为指定端口的方法
下一篇：vue利用better-scroll实现轮播图与页面滚动详解

资讯排行榜
更多>>