2019.04.18 vuex 的学习及应用

我们都知道组件之间的传值，有父组件传子组件、子组件传父组件、兄弟组件之间传值。但是如果个组件均不是以上情况的两个组件怎么传值呢，这就需要我们学习的 vuex 来解决。

1. 什么是 vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单点说，就是一个工具，可以管理（修改或者设置）所有组件用到的数据，而且不需要借助之前的event bus 或者 props 在组件之间传值。

2.vuex 的核心

 

 store（一个容器对象，储存vuex 中的 state mutations actions getters）

2.1  state (一个保存数据的对象，对象中的数据可以供所有组件使用)

// 1. 定义
const state = {
  count: 0
}

// 2. 获取state中的值
this.$store.state.count

// mapState 辅助函数获取多个state的值
import { mapState } from 'vuex'
computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
})
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

// 3. 与组件的计算属性混合使用
computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

2.2   mutations(一个对象，保存的是更改state的函数，也只有它能更改state中的值，触发方式this.$store.commit('函数名',参数))

// 1. 定义
const mutations = {
  increment (state) {
    state.count++
  }
}

// 2. 触发
this.$store.commit('increment')

// 3. 传递参数，通常参数应该是一个对象
mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit('increment', 10)

// 4. 在组件的方法中使用
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

2.3    actions(一个对象，保存的是触发mutations的函数，让mutations去修改state中的值) 

// 1. 定义
const actions = {
  increment: ({ commit }) => commit('increment')
}

// 2. 触发
this.$store.dispatch('increment')

// 3. 参数支持
this.$store.dispatch('incrementAsync', {
  amount: 10
})

// 4. 组件的方法中使用
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

2.4  getters(一个对象，保存的是一些类似与计算属性的函数，可以通过他们得到任何依赖于state的新的数据)

// 1. 定义
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

// 2. 使用
this.$store.getters.evenOrOdd

// 3. 使用其他getters作为参数
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

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

 

3.  vuex 的使用

3.1  安装 vuex：  npm install vuex -S

3.2 使用方法：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

// app.js
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(Counter)
})