vue（21）初識Vuex

Vuex是作什麼的？

• 官方解釋：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

  • 它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
  • Vuex 也集成到 Vue 的官方調試工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

• 狀態管理究竟是什麼？

  • 狀態管理模式，集中式狀態管理這些名詞聽起來就很是高大上，讓人捉摸不透
  • 其實你能夠簡單的將其當作把須要多個組件共享的變量所有存儲在一個對象中
  • 而後，將這個對象放在頂層的Vue實例中，讓其餘組件能夠使用
  • 那麼，多個組件是否能夠共享這個對象中的全部變量屬性了呢？
     

管理什麼狀態呢？

• 可是有什麼狀態須要咱們在多個組件中共享的呢？
  • 若是你作過大型項目，你必定遇到過多個狀態，在多個界面中共享的問題
  • 好比用戶的登陸狀態、頭像、信息、地理位置等等
  • 好比商品的收藏，購物車中的物品等等
  • 這些狀態信息，咱們均可以放在同一的地方，對它進行保存和管理，並且它們仍是響應式的
     

單頁面狀態管理

• 咱們知道，要在單個組件中進行狀態管理是一件很是簡單的事情，咱們來看下圖
  

• 圖中的3個狀態，解釋以下：

  • State：就是咱們的狀態（姑且能夠當作是data中的屬性）；
  • VIew：視圖層，能夠針對state的變化，顯示不一樣的信息；
  • Actions，這裏的Actions主要是用戶的各類操做：點擊、輸入等等，會致使狀態的改變。

代碼以下：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

 

多界面狀態管理

• Vue已經幫咱們作好了單個界面的狀態管理，但若是是多個界面呢？
  • 多個視圖都依賴同一個狀態（一個狀態改了，多個界面須要進行更新）
  • 不一樣界面的Actions都想修改同一個狀態（好比：Home.vue要修改，Profile.vue也須要修改這個狀態）
• 也就是說對於某些狀態（狀態1/狀態2/狀態3）來講只屬於咱們某一個視圖，可是也有一些狀態（狀態a/狀態b/狀態c）屬於多個視圖共同想要維護的
  • 狀態1/狀態2/狀態3你放在本身的房間，你本身管理本身用，沒問題
  • 可是狀態a/狀態b/狀態c咱們但願交給一個大管家來統一幫助咱們管理
  • 那麼Vuex就是幫助咱們統一管理的大管家
• 全局單例模式
  • 咱們如今要作的就是將共享的狀態抽離出來，交給咱們的大管家進行統一管理
  • 以後，咱們的每一個視圖，按照規定好的規定，進行訪問和修改操做
  • 這就是Vuex背後的思想

Vuex狀態管理圖例