正確理解Vuex：懂人生，就懂了Vuex

時間 2019-11-06

標籤正確理解 vuex 人生欄目興趣愛好简体版

原文原文鏈接

Veux的哲學，實質上是人生的哲學。vue

看一看這張圖。vuex

釋義：

魂：你的靈魂，你的心中所想。
形：你的身體，你的外在形態。
人間：你的所做所爲，所見所聞。

想想，人活着不就是如此嗎？ app

你的靈魂，控制着你的身體。異步

你的身體，與世界進行互動，改變並影響着人間。async

人間所發生的一切，又時時刻刻塑造着你的靈魂。函數

閉上眼睛，跟隨本身去體驗：
你心中起了一個想法，你的身體也隨着這個念頭去作出行動。而這個行動，又改造了你周邊的世界。同時，你也聽見、看見了人間發生的事，你的思想你的靈魂在隨之改變。this

形、魂、人間，便是Vue單向數據流。

咱們看一個小型Vue應用。spa

new Vue({
  // 魂(State)：你的心中所想
  data () {
    return {
      money: 0
    }
  },
  // 形(View): 你的外在形態
  template: `
    <div>我有這麼多錢：{{ money }}</div>
  `,
  // 人間(Action):你的所作所爲所見所聞
  methods: {
    earn_money () {
      this.money++
    }
  }
})

現代人彷佛把一切都簡化了——只爲「錢」。設計

人活着就淪爲了這樣的東西：3d

魂，即state：內心只有錢,即money。
形：即view：有多少錢都炫富出來。

<div>我有這麼多錢：{{ money }}</div>

人間：所作的只有一件事，即賺錢:

earn_money () {
  this.money++
}

閉上眼睛，跟隨本身去體驗：
你是一個純粹爲了錢的人。你心中所想，只有錢。你的外在表現，就是你有多少錢。你的一切行爲，都是爲了錢。

人生，遠不止是錢。這時，你須要Veux。

若是人真的能活得這麼純粹，反卻是好事。

但真實的人生，每每更復雜：

賺錢不簡單，你可能須要完成一系列複雜的工做，才能拿到錢。
有錢，也沒法表現出來。但你能夠經過穿着、房子、車子，表現出來。
思想更復雜，你內心遠不止是錢，錢是爲了守住更多的東西，例如尊嚴、愛情、親情。

當面對捉摸不定的思想、深藏不露的人性、變幻莫測的人間...你須要一套處世哲學。
當面對大批量的State，沒法直接取值的View，耦合嚴重的Action的時候，你就須要Vuex了。

如何管理，一個更復雜的人生？

人生，就是一個大型應用。

Vuex就是人的處世哲學。

當你的人生亂成一團糟時，你能夠試試用Veux的方式，來梳理本身的生活。

第一步：想想，你如今內心在乎哪些事？

State，就至關於你心中在乎的事。

那如何去維護這些State呢？錢、父母的健康、愛情，並非輕輕鬆鬆能夠獲得的，你須要縷清楚之間的關係。

Vuex的解決方案：分解爲目標和行動。

Vuex把複雜的「人間」，拆解成了行動(Action)與目標(Mutation)。

Mutation，即目標，它必須是同步函數的。它的功能必須是直截了當的，能夠簡單到「讓XX更多」或"讓XX歸零"的程度。

Action，即行動，在其中能夠包含異步操做(如Ajax獲取數據)，並組合一個個小目標。

View，只能發起一個個行動(dispatch)。
Action，在這裏能夠執行多個同步/異步函數、發起多個行動(dispatch)，達成(commit)一個個小目標。
Mutation, 只能改變state(matate)。
State, 直接影響個人形態，這是vue的工做，不做表述。

固然，咱們有時提取出一些更「有用」的狀態，至關於state的計算參數，即

Getters，State的計算屬性。

因此， Action + Mutation + state，以及dispatch和commit兩個函數，就構成了Veux的邏輯。

咱們也能夠這樣來管理生活

第二步： Mutation: 寫下目標

第三步： Action: 寫下行動

第四步： Getters: 寫下其它指標

代碼化

store.js

const store = new Vuex.Store({
  state: {
    money: 10000000,
    energy: 60,
    love: 30,
    parent_health:50
  },
  mutations: {
    earn_money (state) {
      state.money += 1000
    },
    pay_money (state,payload) {
      state.money -= payload.money_cost
      if(state.money < 0) state.money = 0
    },
    restore_energy(state, payload){
      state.energy = state.energy + payload.sleep_hour*10
      if(state.energy > 100) state.energy = 100
    },
    use_energy(state,payload){
        state.energy -= payload.energy_cost
        if(state.energy < 0) state.energy = 0
    },
    be_romantic(state){
        state.love += 10
    },
    enhance_harmony(state){
        state.love += 5
        parent_health += 10
    }
  },
  actions: {
    async work({commit}){
       commit('use_energy')
       await wait(8)
       commit('earn_money')
    },
    send_gift({commit}){
        commit('pay_money',{money_cost:10000})
        commit('be_romantic')
    },
    async family_walk({commit}){
        commit('use_energy',{energy_cost = 10})
        await wait(1)
        commit('enhance_harmony')
    }
    async sleep({commit}) {
        await wait(8)
        commit('restore_energy')
    },
    async dating({dispatch, state}){
        dispatch('send_gift')
        if(state.love >80){
            await dispatch('sleep')
        }
    }
  },
  getters(){
      location: (state)=>{
          return state.money>10000000 ? 4 : state.money>5000000 ? 5: null
      },
      walk_time: (state)=>{
          return Math.min(energy, parent_health)
      }
  }
})

module.exports = store

在Vue項目中使用Vuex

首先，在app.js中導入vuex

import Vue from 'vue'
import App from './components/App.vue'
import store from './store'

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

以後，在編寫.vue文件時，利用mapState, mapGetters, mapActions, 能夠訪問到StateGettersActions

注意：
mapState和mapGetters必須在computed中訪問，由於它們返回的是對象，因此須要用拓展符...進行展開。

mapActions則是將Action掛載到methods上，也須要用拓展符...進行展開。

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
            ...mapState(['money','love']),
            ...mapGetters(['location']
  }
  methods: {
    ...mapActions(['family_walk','dating'])
  },
  created () {
    this.$store.dispatch('work')
  }
}
</script>