精华内容
参与话题
问答
  • 正确使用state(状态)

    千次阅读 2018-06-29 17:47:45
    不要直接修改 state(状态)例如,这样将不会重新渲染一个组件: // 错误 this.state.comment = 'Hello'; 用 setState() 代替: // 正确 this.setState({comment: 'Hello'}); 唯一可以分配 this.state 的地方是构造....

    关于 setState() 有三件事是你应该知道的。

    一、不要直接修改 state(状态)

    例如,这样将不会重新渲染一个组件:

    // 错误
    this.state.comment = 'Hello';
    

    setState() 代替:

    // 正确
    this.setState({comment: 'Hello'});
    

    唯一可以分配 this.state 的地方是构造函数。

    二、state(状态) 更新可能是异步的

    React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。

    因为 this.propsthis.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。

    例如, 以下代码可能导致 counter(计数器)更新失败:

    // 错误
    this.setState({
      counter: this.state.counter + this.props.increment,
    });
    

    要解决这个问题,应该使用第 2 种 setState() 的格式,它接收一个函数,而不是一个对象。该函数接收前一个状态值作为第 1 个参数, 并将更新后的值作为第 2个参数:

    要弥补这个问题,使用另一种 setState() 的形式,它接受一个函数而不是一个对象。这个函数将接收前一个状态作为第一个参数,应用更新时的 props 作为第二个参数:

    // 正确
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));
    

    我们在上面使用了一个箭头函数,但是也可以使用一个常规的函数:

    // 正确
    this.setState(function(prevState, props) {
      return {
        counter: prevState.counter + props.increment
      };
    });
    

    三、state(状态)更新会被合并

    当你调用 setState(), React 将合并你提供的对象到当前的状态中。

    例如,你的状态可能包含几个独立的变量:

      constructor(props) {
        super(props);
        this.state = {
          posts: [],
          comments: []
        };
      }
    

    然后通过调用独立的 setState() 调用分别更新它们:

      componentDidMount() {
        fetchPosts().then(response => {
          this.setState({
            posts: response.posts
          });
        });
    
        fetchComments().then(response => {
          this.setState({
            comments: response.comments
          });
        });
      }
    

    合并是浅合并,所以 this.setState({comments}) 不会改变 this.state.posts 的值,但会完全替换this.state.comments 的值。

    展开全文
  • vuex概念之State用法详解

    千次阅读 2019-05-08 23:17:00
    假设有如下state定义 一、普通用法 在组件中直接访问: this.$store.state.count 二、mapState辅助函数用法1 使用对象展开运算符,会默认传递参数state,在函数中直接使用就可以了。这样就可以少些2个单词了...

    假设有如下state定义

    一、普通用法

    在组件中直接访问:

    this.$store.state.count

    二、mapState辅助函数用法1

    使用对象展开运算符,会默认传递参数state,在函数中直接使用就可以了。这样就可以少些2个单词了(this.$store)

    ...mapState({
      count: state => state.count
    })

    三、mapState辅助函数用法2

    为了能够使用 `this` 获取组件自己的data数据,必须使用常规函数

    ...mapState({
          count: function (state) {
            return state.count + this.localCount
          }
        }),

    四、mapState辅助函数用法3

    当在计算属性中直接引用state的数据时,可以直接传递字符串数组。

    ...mapState([
          'count'
        ])

    这种写法就相当于上面的《mapState辅助函数用法1》

    五、mapState的这几种用法可以混合使用

    在计算属性中,可以根据实际需要,灵活的组合使用mapState的上面的3种用法。

     ...mapState({
          countAll: function (state) {
            return state.count + this.localCount
          }
        }),
        ...mapState([
          'count'
        ])

     

    展开全文
  • 状态模式(State

    千次阅读 2018-11-30 11:49:30
    1、概念 状态模式允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了...抽象状态角色(State):定义一个接口,用以封装环境(Context)对象的一个特定的状态所对应的行为。 具体状态角色(Concrete...

    1、概念

    状态模式允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它所属的类,属于行为型模式。
    在这里插入图片描述

    2、模式结构

    • 环境角色(Context):定义客户端所感兴趣的接口,并且保留一个具体状态类的实例。这个具体状态类的实例给出此环境对象的现有状态。
    • 抽象状态角色(State):定义一个接口,用以封装环境(Context)对象的一个特定的状态所对应的行为。
    • 具体状态角色(ConcreteState):每一个具体状态类都实现了环境(Context)的一个状态所对应的行为。

    3、使用场景

    • 对象的行为依赖于它的某些属性值,状态的改变将导致行为的变化
    • 在代码中包含大量与对象状态有关的条件语句,这些条件语句的出现,会导致代码的可维护性和灵活性变差,不能方便地增加和删除状态,并且导致客户类与类库之间的耦合增强

    4、优缺点

    优点:

    • 封装了转换规则
    • 枚举可能的状态,在枚举状态之前需要确定状态种类
    • 将所有与某个状态有关的行为放到一个类中,并且可以方便地增加新的状态,只需要改变对象状态即可改变对象的行为
    • 允许状态转换逻辑与状态对象合成一体,而不是某一个巨大的条件语句块
    • 可以让多个环境对象共享一个状态对象,从而减少系统中对象的个数

    缺点:

    • 增加系统类和对象的个数
    • 结构与实现都较为复杂,如果使用不当将导致程序结构和代码的混乱
    • 对"开闭原则"的支持并不太好,对于可以切换状态的状态模式,增加新的状态类需要修改那些负责状态转换的源代码,否则无法切换到新增状态,而且修改某个状态类的行为也需修改对应类的源代码

    5、实例

    定义抽象状态角色ConnectState

    public interface ConnectState {
        void handleAction();
    }
    

    定义具体状态角色ReconnectState

    public class ReconnectState implements ConnectState {
    
        @Override
        public void handleAction() {
            // 重连逻辑
        }
    }
    

    定义具体状态角色SuccessState

    public class SuccessState implements ConnectState {
    
        @Override
        public void handleAction() {
            // 成功逻辑
        }
    }
    

    定义具体状态角色FailureState

    public class FailureState implements ConnectState {
    
        @Override
        public void handleAction() {
            // 失败逻辑
        }
    }
    

    定义环境角色Context

    public class Context {
        private ReconnectState reconnectState;
        private FailureState failureState;
        private SuccessState successState;
    
        public void reconnect() {
            if (reconnectState == null) {
                reconnectState = new ReconnectState();
            }
            reconnectState.handleAction();
        }
    
        public void failure() {
            if (failureState == null) {
                failureState = new FailureState();
            }
            failureState.handleAction();
        }
    
        public void success() {
            if (successState == null) {
                successState = new SuccessState();
            }
            successState.handleAction();
        }
    }
    
    展开全文
  • state

    2017-09-15 22:23:32
    store.js“` import vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(vuex) export default new vuex.Store({ state: { user: [] }, mutations: { setUser (state, v) { state.user.pu

    store.js“`
    import vuex from ‘vuex’
    import Vue from ‘vue’
    Vue.use(vuex)
    export default new vuex.Store({
    state: {
    user: []
    },
    mutations: {
    setUser (state, v) {
    state.user.push(v)

      // state.user.splice(index, 1)
    },
    deleteUser (state, aa) {
      var bb = state.user.indexOf('aa')
      state.user.splice(bb, 1)
    }
    

    }
    })

    person-top










    展开全文
  • State概念 Flink state是一个非常重要的概念,但却有点抽象难以理解,State是个什么玩意? ​ 继续要和流式数据扯上了。state状态指的就是进行每一个operator的中间结果存储。还不懂?举一个例子 无状态:假设有一个...
  • T-state

    2015-07-15 13:53:55
    1. Overview  ...CPU在C0状态下有两种手段降低功耗的方法,其一是之前介绍过的P-state,另一个就是T-state。T-sate全称就是Processor Throttling States,它为OSPM提供了一种通过降低Processor Perfor
  • STATE

    2012-11-05 23:15:47
    STATE  对象方便的包装了行为(behavior)和状态(state):前者被暴露给外部世界,后者则为前者提供支持。 状态(State)  有效管理状态的关键在于:把相似的状态放在一起,确保不同的状态彼此分离。 访问...
  • 程序代码中,怎么区分status和state

    万次阅读 多人点赞 2018-10-21 16:40:07
    在程序代码中,status和state是我们经常使用的两个单词,他们一般被解释为[状态]。但是虽然都被解释为[状态],但是它们的使用场景是不同的,对于具有强迫症,喜欢寻求真理的程序猿来说,必须得了解它们的区别,于是便...
  • Qml状态-State

    2020-08-31 10:45:38
    Qml中的状态State可以用来驱动界面,针对不同的状态显示不同的界面。 状态相关属性 Item控件有一个state属性,字符串类型(默认字符串类型),来设置空间的状态。 Item控件还有一个states的属性,保存该控件的...
  • 文章目录描述定义类型动机UML类图时序图实现主要角色示例适用场景优点缺点相关模式 描述 定义 允许一个对象在其内部状态改变时改变它的行为,对象看起来...State:状态接口类 定义一个接口以封装与Context的一个特
  • 上一章大概说明了vuex的设计初衷和基本... vuexstate和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新. 虽然...
  • vuex的基本使用 store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); //定义属性 var state = { count:6, country:'中国' }; //定义getters var getters = { count(state){ return ...
  • // 第一种方式 ... {{$store.state.count}} <!--第一种方式--> </div> </template> <script type="text/ecmascript-6"> export defa
  • VuexState和Getter

    千次阅读 2019-03-28 18:02:30
    Vuex 的内脏由五部分组成:State、Getter、Mutation、Action 和 Module。关于这五个部分,我会分为多个章节来进行详细阐述,这一讲就先和大家一起彻底搞定 State 和 Getter。 当然,在实际应用中,这五个部分并不是...
  • Vuex 1. 介绍 什么是Vuex: 官网:https://vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的数据状态管理模式。 它采用集中式存储管理应用中所有组件的共享数据,Vuex是组件之间数据共享的一种机制。 2...
  • 前言:本文主要用于帮助笔者和新人理解vuex的使用,因个人能力有限,有什么建议可以留言一起探讨...接上文:vuex--学习笔记(一)初识在上文中,我们实际上已经接触过一种在组件中获取vuexstate对象中属性的方法,...
  • 1.文件创建 当然,文件创建的位置自己可以定,本文例子都在src文件夹下进行创建。 main.js ...import vuex_test from './vuex_test.vue' new Vue({ el:'#app', store, render:xx=>xx(vuex_te...
  • 一、state的用法 <body> <!-- 想要获取到state中的数据 {{$store.state.属性}} 以为这个表达式很长,所以我们可以直接通过computed去获取 { computed: { 属性名 () { return ...
  • Vuex (一) :state

    2019-02-25 15:02:01
    Vuex (一) :state Vue中文版文档 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 利用Vue CLI创建一个普通的项目在此基础上进行Vuex的学习 我这里采用 vue ui界面创建,只选择了Router,以及Babel ...
  • 使用vuex修改state时,有两种方式: 1)可以直接使用 this.$store.state.变量 = xxx; 2)this.$store.dispatch(actionType, payload)   或者: this.$store.commit(commitType, payload)     二. 异同点 ...
  • 最近在用vue写pc端项目,用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。 1. 产生原因 其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue...
  • 前言 从这一篇文章开始,将要学习...本篇文章我们主要是讲解vuex之中的两大关键字,state,getters的设置。走起吧。 state state,翻译成中文表示的是状态一词,所以我们可以很明确的说这个关键字下面存储的实际上...
  • ```state:{ isLogin:false, car:[] }, getters:{ clearUp:function(state){ return state.car.sort(function(m,n){n-m}) } }, mutations:{ addCar:function(state,g){ var swi = -1 for(var...
  • state应用: getter应用: mutation应用: action应用: module应用: Vuex是什么? 官方文档说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的...
  • (vuex)动态监听state变化

    万次阅读 2018-03-12 22:45:42
    vuex的dispatch是异步执行的,所以如果有用到state的地方但是又没有绑定组件的话就会导致渲染完成了但是数据没有获取到的情况 如何检测state中的数据变化,下面举个栗子/*store.js*/ const state={ existSSID:{}, ...
  • vuex中modules可以将项目state进行分块,互补干扰。那么在单个module中,action如何调用其他module中action或者根action/mutation/state? 打印action参数: const actions={ editName(options,payload){ ...
  • vuexstate数据的存储

    千次阅读 2017-09-12 14:34:21
    1。在src文件下创建一个store文件,里面加入一个store....内容大致为import vuex from 'vuex' import Vue from 'vue' Vue.use(vuex) export default new vuex.Store({ /*state必须*/ state:{ user:{} }, mutations
  • vuex修改状态state的方法

    千次阅读 2019-11-07 22:42:47
    vuex想要改变state里的属性,官方推荐的方法是通过mutaion的方式修改state。 例如: const mutations = { SET_LOGDATA(state, payload) { state.logData = payload; }, }
  • 2、store.js、这里面先引入了vue和vuex,然后注册了四种状态分别的组件,最后把store输出,就可以直接用了 3、state.js:这里面主要定义了需要的属性,只有在这里定义的属性,在使用时才能获取的到 4、actionds...
  • Vuex中调用state数据

    2020-06-07 08:54:15
    姓名:{{$store.state.msg}}</h1> 第二种:利用计算属性 将想要用到的全局state数据,防止到组件的computed内部使用,v-model的内容将其获取和设置分开即可 1 2 3 4 5 6 7 ...

空空如也

1 2 3 4 5 ... 20
收藏数 1,466,376
精华内容 586,550
关键字:

state