共计 3439 个字符，预计需要花费 9 分钟才能阅读完成。
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 的设计哲学，你更懂得了如何管理人生。
你可以问自己三个问题：
梳理思绪：我心中最在意的事。
设立目标：这些最在意的事，会发生怎样改变？
创建行动：连接一个个小目标，形成你要做的行动。
然后，行动吧！只要做正确的事，你所期待的，就一定会发生！
