正确理解Vuex: 懂人生,就懂了Vuex

刘羽冲

Veux的哲学,实质上是人生的哲学。

看一看这张图。

image

释义:
  • 魂: 你的灵魂,你的心中所想。
  • 形: 你的身体,你的外在形态。
  • 人间: 你的所作所为,所见所闻。

想一想,人活着不就是如此吗?

你的灵魂,控制着你的身体。

你的身体,与世界进行互动,改变并影响着人间。

人间所发生的一切,又时时刻刻塑造着你的灵魂。

闭上眼睛,跟随自己去体验:

你心中起了一个想法,你的身体也随着这个念头去做出行动。 而这个行动,又改造了你周边的世界。同时,你也听见、看见了人间发生的事,你的思想你的灵魂在随之改变。

形、魂、人间,即是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++
}
闭上眼睛,跟随自己去体验:

你是一个纯粹为了钱的人。 你心中所想,只有钱。 你的外在表现,就是你有多少钱。你的一切行为,都是为了钱。

image

人生,远不止是钱。这时,你需要Veux。

如果人真的能活得这么纯粹,反倒是好事。

但真实的人生,往往更复杂:

  1. 赚钱不简单,你可能需要完成一系列复杂的工作,才能拿到钱。
  2. 有钱,也无法表现出来。但你可以通过穿着、房子、车子,表现出来。
  3. 思想更复杂,你心里远不止是钱,钱是为了守住更多的东西,例如尊严、爱情、亲情。
当面对捉摸不定的思想、深藏不露的人性、变幻莫测的人间...你需要一套处世哲学。

当面对大批量的State,无法直接取值的View,耦合严重的Action的时候,你就需要Vuex了。

如何管理,一个更复杂的人生?

人生,就是一个大型应用。

Vuex就是人的处世哲学。

当你的人生乱成一团糟时,你可以试试用Veux的方式,来梳理自己的生活。

第一步: 想一想,你现在心里在意哪些事?

image

State,就相当于你心中在意的事。

那如何去维护这些State呢? 钱、父母的健康、爱情,并不是轻轻松松可以得到的,你需要缕清楚之间的关系。

image

Vuex的解决方案: 分解为目标和行动。

Vuex把复杂的“人间”,拆解成了行动(Action)与目标(Mutation)。

Mutation,即目标,它必须是同步函数的。 它的功能必须是直截了当的,可以简单到“让XX更多”或"让XX归零"的程度。

Action,即行动,在其中可以包含异步操作(如Ajax获取数据),并组合一个个小目标。

  • View,只能发起一个个行动(dispatch)。
  • Action,在这里可以执行多个同步/异步函数、发起多个行动(dispatch),达成(commit)一个个小目标。
  • Mutation, 只能改变state(matate)。
  • State, 直接影响我的形态,这是vue的工作,不作表述。

image

当然,我们有时提取出一些更“有用”的状态,相当于state的计算参数,即

  • Getters,State的计算属性。

image

所以, Action + Mutation + state, 以及dispatch和commit两个函数,就构成了Veux的逻辑。

我们也可以这样来管理生活

第二步: Mutation: 写下目标

image

第三步: Action: 写下行动

image

第四步: Getters: 写下其它指标

image

代码化

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的设计哲学,你更懂得了如何管理人生。

你可以问自己三个问题:

  • 梳理思绪: 我心中最在意的事。
  • 设立目标:这些最在意的事,会发生怎样改变?
  • 创建行动:连接一个个小目标,形成你要做的行动。

然后,行动吧! 只要做正确的事,你所期待的,就一定会发生!

阅读 7.6k

node.js优雅之道
Design Elegance, Code Elegance, Enjoy Elegance.

破庙中神易,破心中神难。 当人类第一次仰望天空的时候,就已经有罪!

4.1k 声望
924 粉丝
0 条评论

破庙中神易,破心中神难。 当人类第一次仰望天空的时候,就已经有罪!

4.1k 声望
924 粉丝
文章目录
宣传栏