vue 全家桶之 vuex

2018-11-22  本文已影响0人  简爱的三年

Vuex 是什么?

有时候我们需要全局操作组件的状态,父子组件传参又太过于繁琐,这个时候我们选择
vuex 来作为全局状态管理模式

什么是全局状态管理模式?

这个状态自管理应用包含以下几个部分:

flow.png

1.1 state

全局的状态存放在state中,方便每一个组件的使用

  new vuex.Store({
    state: {
      count: 0
    }
  })

我们一般将 state 的值通过 computed 计算属性的形式来展现到各组件中:

component组件:

  var component = {
    template: `component组件   {{ count }}`,
    computed: {
      count() {
        return this.$store.state.count
      }
    }
  }

每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

1.2 mapState 辅助函数

当我们需要多个数据时,使用上面的方法会使代码非常的冗余,建议使用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
    }
  })

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

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

1.1 Getter

getter的作用:
当用户获取state数据时,我们希望对state数据进行一些外加的操作,跟自定义过滤器非常的类似。

new Vuex.Store({
  state: {
    count: [1, 2, 3, 4, 5]
  },
  getters: {
    maxNum(state) {
      return Math.max(...state.count)
    }
  }
})

1.2 通过属性访问

Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:

var component = {
  template: `<div > {{ maxNum }}</div>`,
  computed: {
    maxNum() {
        return  this.$store.getters.maxNum  //  5        
     }
  }
}


1.3 mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'maxNum',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字,使用对象形式:

  mapGetters({
// 就是将属性名 maxNum 改为 max 而已。
  max: 'maxNum'
})

Mutation

上一篇 下一篇

猜你喜欢

热点阅读