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

URLOS 發布于2019-08-23 16:47 / 2759人閱讀

摘要：人生，遠不止是錢。如何管理，一個更復雜的人生人生，就是一個大型應用。把復雜的人間，拆解成了行動與目標。所以，，以及和兩個函數，就構成了的邏輯。現在，你不僅完全理解了的設計哲學，你更懂得了如何管理人生。

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

看一看這張圖。

釋義：

魂：你的靈魂，你的心中所想。

形：你的身體，你的外在形態。

人間：你的所作所為，所見所聞。

想一想，人活著不就是如此嗎？

你的靈魂，控制著你的身體。

你的身體，與世界進行互動，改變并影響著人間。

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

閉上眼睛，跟隨自己去體驗：

你心中起了一個想法，你的身體也隨著這個念頭去做出行動。而這個行動，又改造了你周邊的世界。同時，你也聽見、看見了人間發生的事，你的思想你的靈魂在隨之改變。

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

我們看一個小型Vue應用。

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

現代人似乎把一切都簡化了——只為“錢”。

人活著就淪為了這樣的東西：

魂，即state：心里只有錢,即money。

形：即view：有多少錢都炫富出來。

我有這么多錢：{{ money }}

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

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上，也需要用拓展符...進行展開。

結語

成功學中有兩個很重要的概念，叫“目標導向” “階段性執行”，回頭來看，不正是Veux的哲學嗎？

Mutation目標導向: 設定簡單的目標，改變State

Action階段性執行：執行一個個Matation、異步函數、和其它階段性執行。

現在，你不僅完全理解了Veux的設計哲學，你更懂得了如何管理人生。

你可以問自己三個問題：

梳理思緒：我心中最在意的事。

設立目標：這些最在意的事，會發生怎樣改變？

創建行動：連接一個個小目標，形成你要做的行動。

然后，行動吧！只要做正確的事，你所期待的，就一定會發生！

GPU云服務器云服務器 Vuex vuex cdn Vue_Vuex 正確理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103296.html

基于Vue,Vue-router,Vuex的簡書網站模仿

摘要：本文假設讀者手里有關于和的文檔，并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹，可以配合本文進行學習。關鍵就是在中部導航欄熱門，新上榜那塊，棕色框內的內容會根據中部導航欄選中不同內容進行改變。在這個教程里面，我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔，并且對Vue-router...

warnerwu 2019-08-29 11:16 評論0 收藏0
基于Vue,Vue-router,Vuex的簡書網站模仿

摘要：本文假設讀者手里有關于和的文檔，并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹，可以配合本文進行學習。關鍵就是在中部導航欄熱門，新上榜那塊，棕色框內的內容會根據中部導航欄選中不同內容進行改變。在這個教程里面，我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔，并且對Vue-router...

shiyang6017 2019-08-01 15:42 評論0 收藏0
vuex實現及簡略解析

摘要：是如何被使用到各個組件上的為什么的數據是雙向綁定的在組件中為什么用可以觸發的在組件中為什么用可以觸發的等等等等帶著一堆問題，我們來自己實現一個，來理解的工作原理。為了解決以上問題，允許我們將分割成模塊。大家都知道vuex是vue的一個狀態管理器，它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。先看看vuex下面的工作流程圖 showImg(...

王晗 2019-08-23 15:34 評論0 收藏0
vue項目首頁加載速度優化

摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導致這個文件很大，那首屏加載的速度肯定會被拖慢。凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實踐來做一下總結。希望拋磚引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 評論0 收藏0
vuex的使用

摘要：使用狀態對象的訪問我把理解成構造器中的里面存放一些數據，例如用戶姓名性別身份證號等等。 vuex是配合vue一塊兒使用的一個狀態管理工具。我通常使用它來保存一些全局的數據，例如用戶登錄信息，用戶身份信息，總之一些在很多頁面都會使用到的信息，都保存在vuex里面，用的時候就不需要再去請求接口了，直接去vuex里面拿就可以了。先放官網地址安裝 npm install vuex --sav...

tunny 2019-08-22 16:28 評論0 收藏0