Veux的哲學，實質上是人生的哲學。
看一看這張圖。
釋義：
- 魂： 你的靈魂，你的心中所想。
- 形： 你的身體，你的外在形態。
- 人間： 你的所作所爲，所見所聞。
想一想，人活着不就是如此嗎？
你的靈魂，控制着你的身體。
你的身體，與世界進行互動，改變並影響着人間。
人間所發生的一切，又時時刻刻塑造着你的靈魂。
閉上眼睛，跟隨自己去體驗：你心中起了一個想法，你的身體也隨着這個念頭去做出行動。 而這個行動，又改造了你周邊的世界。同時，你也聽見、看見了人間發生的事，你的思想你的靈魂在隨之改變。
形、魂、人間，即是Vue單向數據流。
我們看一個小型Vue應用。
new Vue({
// 魂(State)：你的心中所想
data () {
return {
money: 0
}
},
// 形(View): 你的外在形態
template: `
<div>我有這麼多錢：{{ money }}</div>
`,
// 人間(Action):你的所做所爲所見所聞
methods: {
earn_money () {
this.money++
}
}
})現代人似乎把一切都簡化了——只爲“錢”。
人活着就淪爲了這樣的東西：
- 魂，即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>結語
成功學中有兩個很重要的概念，叫“目標導向” “階段性執行”，回頭來看，不正是Veux的哲學嗎？
Mutation目標導向: 設定簡單的目標，改變State
Action階段性執行： 執行一個個Matation、異步函數、和其它階段性執行。
現在，你不僅完全理解了Veux的設計哲學，你更懂得了如何管理人生。
你可以問自己三個問題：
- 梳理思緒： 我心中最在意的事。
- 設立目標：這些最在意的事，會發生怎樣改變？
- 創建行動：連接一個個小目標，形成你要做的行動。
然後，行動吧！ 只要做正確的事，你所期待的，就一定會發生！