精华内容
参与话题
问答
  • 正确使用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 的值。

    展开全文
  • 状态模式(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();
        }
    }
    
    展开全文
  • 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'
        ])

     

    展开全文
  • Vuex中的State

    2019-12-03 18:20:39
    State 单一状态树 一、什么是单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含...

    State

    单一状态树

    一、什么是单一状态树

    • Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
    • 但是,它是什么呢?我们来看一个生活中的例子。
      • 我们知道,在国内我们有很多的信息需要被记录,比如上学时的个人档案,工作后的社保记录,公积金记录,结婚后的婚姻信息,以及其他相关的户口、医疗、文凭、房产记录等等(还有很多信息)。
      • 这些信息被分散在很多地方进行管理,有一天你需要办某个业务时(比如入户某个城市),你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息,最后到一个地方提交证明你的信息无误。
      • 这种保存信息的方案,不仅仅低效,而且不方便管理,以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)。
    • 这个和我们在应用开发中比较类似:
      • 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
      • 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
      • 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。

    二、在 Vue 组件中获得 Vuex 状态

    1. 引入Vuex:(类似于Vue-Router的使用方式)

    这里我们使用一个计数器的案例做演示,首先,我们需要在某个地方存放我们的Vuex代码,这里,我们先创建一个文件夹store,并且在其中创建一个index.js文件,并在index.js文件中写入如下代码:

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 1. 安装插件
    Vue.use(Vuex)
    
    // 2. 创建对象
    const store = new Vuex.Store({
      state: {
        counter: 0,
      },
      mutations: {
        increment(state) {
          state.counter++
        },
        decrement(state) {
          state.counter--
        }
      }
    })
    
    // 3.导出store对象
    export default store
    
    1. 挂载到Vue实例中

    其次,我们让所有的Vue组件都可以使用这个store对象,来到main.js文件,导入store对象,并且放在new Vue
    这样,在其他Vue组件中,我们就可以通过this.$store的方式,获取到这个store对象了

    import Vue from 'vue'
    import App from './App'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      render: h => h(App)
    })
    
    
    1. 使用Vuex管理counter
    <template>
      <div>
        <h2>{{$store.state.counter}}</h2>
        <h2>{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
      </div>
    </template>
    
    <script>
      export default {
        name: 'HelloVuex',
        computed: {
          counter() {
            return this.$store.state.counter
          }
        },
        methods: {
          increment() {
            this.$store.commit('increment')
          },
          decrement() {
            this.$store.commit('decrement')
          }
        },
      }
    </script>
    
    <style scoped>
    
    </style>
    

    三、Vuex中的State使用总结

    1. 好的,这就是使用Vuex最简单的方式了。
    2. 我们来对使用步骤,做一个简单的小结:
      • 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)
      • 提取出一个公共的store对象,用于保存在多个组件中共享的状态
      • store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到
      • 在其他组件中使用store对象中保存的状态即可
        • 通过this.$store.state.属性的方式来访问状态
        • 通过this.$store.commit('Mutations中方法')的方式来修改状态

    注意事项:

    • 我们通过显式地提交Mutations的方式,而非直接改变$store.state.counter来修改counter状态。
    • 这是因为Vuex可以更明确的追踪状态的变化,同时可以使用官方提供的调试工具跟踪每一次的状态改变,所以不要直接改变$store.state.counter的值。
    展开全文
  • setState总结

    2020-11-14 14:10:20
    State React 组件中的数据可以来源于使用者,也可以组件自身维护。使用者传递的数据就是组件的属性 (props),而组件自身维护的数据就是组件的状态(state)。 React 中的哲学:数据属于谁,谁才有权力更改。 对于...
  • Jetpack Compose 像React或者Flutter一样,需要通过state变更驱动UI刷新。但是Compose没有React的ClassComponent或者Flutter的StatefulWidget,那Compose是如何更新并监视state呢? state 一种方式是使用state{...}...
  • Flutter中State的生命周期

    千次阅读 2019-01-27 00:00:18
    State作为StatefulWidget的逻辑和内部状态的持有者. 一个StatefuleWidget类会对应一个State类,在Widget生命周期内,当Widget被build或者Widget发生改变时,会同步读取State的信息。当Widget状态发生改变时,有必要...
  • 程序代码中,怎么区分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}} &lt;!--第一种方式--&gt; &lt;/div&gt; &lt;/template&gt; &lt;script type="text/ecmascript-6"&gt; 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对象中属性的方法,...
  • 一、state的用法 &lt;body&gt; &lt;!-- 想要获取到state中的数据 {{$store.state.属性}} 以为这个表达式很长,所以我们可以直接通过computed去获取 { computed: { 属性名 () { return ...
  • 1.文件创建 当然,文件创建的位置自己可以定,本文例子都在src文件夹下进行创建。 main.js ...import vuex_test from './vuex_test.vue' new Vue({ el:'#app', store, render:xx=>xx(vuex_te...
  • 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,457,846
精华内容 583,138
关键字:

state