zoukankan      html  css  js  c++  java
  • vue的store状态管理模式

     var store = {

       debug: true,

       state: {

        message: 'Hello!'

      },

      setMessageAction (newValue) {  //所有 store 中 state 的改变,都放置在 store 自身的 action 中去管理。

        if (this.debug) {

          //当错误出现时,我们现在也会有一个 log 记录 bug 之前发生了什么。

          console.log('setMessageAction triggered with', newValue)  

          this.state.message = newValue

        },

      clearMessageAction () {

        if (this.debug) {

          console.log('clearMessageAction triggered')

          this.state.message = ' '

        }

      }

    }

    var vmA = new Vue({

      data: {

        privateState: {},  //每个实例/组件仍然可以拥有和管理自己的私有状态

        sharedState: store.state

      }

    })

    重要的是,注意你不应该在 action 中 替换原始的状态对象 - 组件和 store 需要引用同一个共享对象,mutation 才能够被观察。

    组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation)、保存状态快照、历史回滚/时光旅行的先进的调试工具。

    状态管理核心状态管理有5个核心,分别是state、getter、mutation、action以及module。(原文链接:https://blog.csdn.net/qq_38658567/article/details/82847758)
    分别简单的介绍一下它们:
    1、state
    state为单一状态树,在state中需要定义我们所需要管理的数组、对象、字符串等等,只有在这里定义了,在vue.js的组件中才能获取你定义的这个对象的状态。
    2、getter
    getter有点类似vue.js的计算属性,当我们需要从store的state中派生出一些状态,那么我们就需要使用getter,getter会接收state作为第一个参数,而且getter的返回值会根据它的依赖被缓存起来,只有getter中的依赖值(state中的某个需要派生状态的值)发生改变的时候才会被重新计算。
    3、mutation
    更改store中state状态的唯一方法就是提交mutation,就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数,我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。
    4、action
    action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action,则需要执行store.dispatch

    5、module

    module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个模块中拥有自己的state、mutation、action和getter。

    组件仍然保有局部状态:使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

    一个值得做一做的小demo,可以快速理解store,里面有讲store的配置和state、getters、mutation、actions、直接使用commit提交给mutation修改状态的方式、vue推荐的使用dispatch经过actions提交commit给mutation修改状态的方式,以及如何使用mapState、mapGetters、mapActions简化修改状态的代码

    https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

    2019.11.01更新

    store中的属性在组件的dom中直接赋值时可以自动更新,但如果放在组件的data中,是不会即时更新的,要刷新页面才会显示变化。把它放到computed中通过函数return获取可以即时更新。

    <input :value=value class="amout-edit"/>
    computed: {
      value() {
        return this.$store.state.amount
      }
    },
  • 相关阅读:
    自动化CodeReview
    10个有关RESTful API良好设计的最佳实践
    ASP.NET Core 获取控制器上的自定义属性
    [转] Autofac创建实例的方法总结
    PetaPoco
    LogViewer
    hdoj:2047
    hdoj:2046
    hdoj:2045
    hdoj:2044
  • 原文地址:https://www.cnblogs.com/icctuan/p/11757243.html
Copyright © 2011-2022 走看看