vuex example

接著上一篇的vuex簡單剖析，接下來主要來寫一個(gè)簡單的例子??鸽凶，來操作一番。

<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  import {mapState, mapActions, mapGetters} from 'vuex'

  export default {

    mounted () {
      console.log(this.$store)
    },

    /*computed: {
      count () {
        return this.$store.state.count
      },
      evenOrOdd () {
        return this.$store.getters.evenOrOdd
      }
    },*/
    computed: {
      ...mapState(['count']),
      ...mapGetters(['evenOrOdd'])
      // ... 擴(kuò)展運(yùn)算符
      // mapGetters和mapState執(zhí)行 返回值為對象 {evenOrOdd () {return this.$store.getters.evenOrOdd}}
      // 如果名字不一致 不能使用(['']) ...mapGetters({event callback name:'getters name')
    },

    /*methods: {
      increment () {
        this.$store.dispatch('increment')
      },
      decrement () {
        this.$store.dispatch('decrement')
      },
      incrementIfOdd () {
        this.$store.dispatch('incrementIfOdd')
      },
      incrementAsync () {
        this.$store.dispatch('incrementAsync')
      }
    }*/
    methods: {
      ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
    }
  }
</script>

store

/*
vuex最核心的管理對象store
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

/*
相當(dāng)于data對象的狀態(tài)對象
 */
const state = {
  count: 0  // 指定初始化數(shù)據(jù)
}

/*
包含了n個(gè)直接更新狀態(tài)的方法的對象
 */
const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

/*
包含了n個(gè)間接更新狀態(tài)的方法的對象
 */
const actions = {
  // {commit} -> 傳了一個(gè)對象 ，對象解構(gòu)
  increment ({commit}) {
    // 提交一個(gè)mutation請求
    commit('INCREMENT')
  },
  decrement ({commit}) {
    // 提交一個(gè)mutation請求
    commit('DECREMENT')
  },
  incrementIfOdd ({commit, state}) {
    if (state.count % 2 === 1) {
      // 提交一個(gè)mutation請求
      commit('INCREMENT')
    }
  },
  incrementAsync ({commit}) {
    setTimeout(() => {
      // 提交一個(gè)mutation請求
      commit('INCREMENT')
    }, 1000)
  }
}

/*
包含多個(gè)getter計(jì)算屬性的對象
 */
const getters = {
  // 不需要調(diào)用
  evenOrOdd (state) { // 當(dāng)讀取屬性值時(shí)自動調(diào)用并返回屬性值
    return state.count % 2 === 0 ? '偶數(shù)' : '奇數(shù)'
  }
}

export default new Vuex.Store({
  state, // 狀態(tài)
  mutations, // 包含多個(gè)更新state fn
  actions, // 包含多個(gè)時(shí)間回調(diào)函數(shù)
  getters // 包含多個(gè) compute getter
})

這篇article just 記錄一下