• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > Vuex之理解state的用法实例

Vuex之理解state的用法实例

作者:何凯 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vuex state,vuex实例,vuex,vuex中文文档,vuex教程等相关知识,何凯 希望在学习及工作中可以帮助到您

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
 })
}
</div>

看看源码

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
  }
</div>

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

</div>

您可能想查找下面的文章:

  • 详解vuex 中的 state 在组件中如何监听
  • Vuex之理解state的用法实例

相关文章

  • 2017-05-30Vue异步组件使用详解
  • 2017-05-30Vue插件写、用详解(附demo)
  • 2017-05-30vue学习笔记之vue1.0和vue2.0的区别介绍
  • 2017-09-10如何写一个简单的vue移动端组件库
  • 2017-05-30vue动态组件实现选项卡切换效果
  • 2017-05-30vue.js开发环境搭建教程
  • 2017-05-30vue.js学习之递归组件
  • 2017-05-30超简单的Vue.js环境搭建教程
  • 2017-05-30Vue数据驱动模拟实现3
  • 2017-05-30详解vue-router 2.0 常用基础知识点之router-link

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue + socket.io实现一个简易聊天室示例代码
    • vue.js实现含搜索的多种复选框(附源码)
    • Vue中使用vux的配置详解
    • Vue.js 递归组件实现树形菜单(实例分享)
    • 详解打造 Vue.js 可复用组件
    • vuejs在解析时出现闪烁的原因及防止闪烁的方法
    • Vue.js系列之项目结构说明(2)
    • vue2.0组件之间的通信
    • Vue.js Ajax动态参数与列表显示实现方法
    • 详解Vuejs2.0之异步跨域请求

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有