前端培训-中级阶段（41）- vue 2.x 状态管理 vuex

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，如今前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提高技术水平，打牢基础知识的中心思想，咱们开课啦（每周四）。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

五大核心模块

• State，数据中心，能够理解为 Vue 中的 data。只不过为了保持数据流向，须要用 store.commit('increment') 来修改（Mutation 内部再去修改 state），能够更明确地追踪到状态的变化。

  • 获取时可使用 store.state.count、this.$store.state.count、mapState

  • mapState 能够接收对象和数组，能够直接放在 computed: mapState({}) 上，也可使用展开运算符 computed: {localComputed () {}, ...mapState({})}

    • 对象形式

      mapState({
          // 箭头函数可以使代码更简练
          count: state => state.count,
      
          // 传字符串参数 'count' 等同于 `state => state.count`
          countAlias: 'count',
      
          // 为了可以使用 `this` 获取局部状态，必须使用常规函数
          countPlusLocalState (state) {
            return state.count + this.localCount
          }
        })

    • 数组形式

      mapState([
        // 映射 this.count 为 store.state.count
        'count'
      ])

• Getter，能够理解为 Vue 的 computed 计算属性，返回值也会根据它的依赖被缓存起来，只有当它的依赖值发生了改变才会被从新计算。

  • 获取时可使用 store.getters.count、this.$store.getters.count、mapState

  • mapGetters

    • 单纯的映射 ...mapGetters(['doneTodosCount','anotherGetter',])
    • 换个名字映射出来 ...mapGetters({doneCount: 'doneTodosCount'})

• Mutation 能够理解为methods ，也能够理解为 setState ，只不过 mutation 必须是同步函数，定义上来讲是用来同步修改 state。

  • store.commit('increment') 不传递内容 increment (state, payload){payload == undefined}
  • store.commit('increment', 1) 传递数值 increment (state, payload){payload == 1}
  • store.commit('increment', {n:1}) 传递对象（推荐） increment (state, payload){payload == {n:1}}（我只是在描述内容是什么，想测试能够用 console.log）
  • ...mapMutations(['increment'])
  • ...mapMutations({add:'increment'})

将 this.add() 映射为 this.$store.commit('increment')

• Action Action 提交的是 mutation，而不是直接变动状态。Action 能够包含任意异步操做。
  在 vue 中使用 mapActions 作快捷映射，也能够不作映射直接使用 store.dispatch('increment')。
  dispatch 会返回一个 Promise ，因此咱们也能够愉快的监听异步是否执行完成。

• Module Vuex 容许咱们将 store 分割成模块（module）。每一个模块拥有本身的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行一样方式的分割：

  const moduleA = {
    namespaced: true,//经过namespaced开启命名空间，默认状况下，模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块可以对同一 mutation 或 action 做出响应。
    state: () => ({ ... }),
    mutations: { ... },
    actions: { ... },
    getters: { ... }
  }
  
  const moduleB = {
    state: () => ({ ... }),
    mutations: { ... },
    actions: { ... }
  }
  
  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB
    }
  })
  
  store.state.a // -> moduleA 的状态
  store.state.b // -> moduleB 的状态

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划