美文网首页Vue前端
WePY中Redux学习

WePY中Redux学习

作者: 打酱油12138 | 来源:发表于2019-04-12 11:00 被阅读13次

    WePY是Vue封装的让小程序支持组件化开发的框架

    WePY官方文档

    重点学习Redux

    Redux是状态管理的框架(更简单的实现全局通信和状态管理)

    这里参考了阮一峰大神的教程
    Redux入门教程

    Redux设计思想:

    • web应用时一个状态机,视图与状态时一一对应的
    • 所有的状态,保存在一个对象里面

    主要分为三部分:

    名称 属性 理解
    action 动作 可执行的方法
    reducers 发起动作返回状态 state下的状态值(K-V)
    types 方法名

    使用的是WePY框架下的wepy-redux:

    // 构建全局状态
    const store = configStore()
    setStore(store)
    
    // 发出动作,更新状态 
    // xx: 动作名  y:传入参数
    store.dispatch( xx( y ) )
    
    // 获取state下x的z属性
    store.getState().x.z
    

    wepy-redux简单使用

    • 最简单读取状态:在计算属性中引用
    computed: {
        count () {
          return store.state.count
        }
    }
    
    • vue将store"注入"到每个组件之中
    const app = new Vue({
      el: '#app',
      // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
      store,
      components: { Counter },
      template: `
        <div class="app">
          <counter></counter>
        </div>
      `
    })
    
    • 注入之后子组件可以通过this.$store访问到
    computed: {
        count () {
          return this.$store.state.count
        }
      }
    
    • mapState 辅助函数
    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
    
    export default {
      // ...
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,
    
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
    
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }
    

    getter(store的计算属性)

    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    

    记录下目前对redux的理解和使用,对后续深入学习redux和vuex应该会有所帮助。
    后面会更新对redux的理解

    未完待续

    相关文章

      网友评论

        本文标题:WePY中Redux学习

        本文链接:https://www.haomeiwen.com/subject/njcumqtx.html