vuex中的四大金剛

vuex經常讓我這樣的初學者摸不着頭腦，剛學完vuex的我想用下面幾個簡單通俗的栗子來進行小小的分享

什麼是vuex？

Vuex 是一個專爲 Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。(vuex是以插件的方式存在的)
複製代碼

什麼狀況下使用vuex?

並非全部的項目都適合使用vuex，vuex通常適用於大型項目。在進行大型項目開發的時候，經常會碰到多個組件須要用到同一個狀態，這個時候，vuex就能派上用場，它能把組件的共享狀態抽取出來，當作一個全局單例模式進行管理。這樣無論你在何處改變狀態，都會通知使用該狀態的組件作出相應修改。
複製代碼

如何引入vuex？

* 安裝 ---- `npm install vuex --save`

* 引入---- 以插件的方式引入，在src目錄下建立一個store.js文件並在其中引入

```
import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)
```
複製代碼

vue中的四大金剛

爲了更加通俗易懂地理解，引入公司的概念來闡述這四大核心
複製代碼

• state ---- 惟一一個數據源，vuex的總倉庫，存儲數據 （至關於公司的CEO,掌管這公司總資產）

• mutations ---- 用於修改state的數據狀態，而且只能在mutations中修改state的數據 狀態（至關於公司的財務部門，擁有修改state的權力）

• actions ---- 解決異步改變共享數據(至關於工做部門，向財務部門提交修改state的請求)

• getters ---- 對state 裏面的數據二次處理（對數據進行過濾相似filter的做用）

下圖是這幾個狀態之間的關係圖：

接下來經過幾個簡單的demo來說解

一. 在store.js中定義好如下對象
複製代碼

1. 先定義好數據倉庫中的數據

const state = {
  showSidebar: true,
}

複製代碼

2. 在mutations中定義一個sidebar的方法，用來修改state中showSidebar值，傳入兩個參數

const mutations = {
 sidebar(state, status) {
    state.showSidebar = status
    }
  }
複製代碼

3. 在actions中建立setShowSidebar方法，用來接收mutations中的sidebar方法。傳入兩個參數， {commit} 參數是用來將其提交給mutations，是必須的參數。

const actions = {
  setShowSidebar ({commit}, status) {
    commit(sidebar, status)
    }
  }
複製代碼

4. 在getters中對vuex頂層數據進行過濾，而不改動state裏本來的數據

const getters = {
  showSidebar: state => state.showSidebar
}

複製代碼

最後再拋出這四個對象

export default {
  state,
  mutations,
  actions,
  getters
}
複製代碼

二. 調用store.js中的state的值

1. 新建一個vue的模板，位置在components文件夾下，名字叫sidebar.vue。 此時咱們動態綁定一個class，其值由數據源倉庫中的state中的showSidebar值決定，而且綁定一個點擊事件_hidebar。

<template>
   <div class="sidebar" :class="{showSidebar: showSidebar}" @click="_hidebar">
   </div>
</template>

複製代碼

2. 若想要從state倉庫中取出showSidebar的值，則能夠引入 mapGetters 輔助函數，而且放在 computed 屬性裏面，用法以下。

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'showSidebar'
    ])
  }
}

複製代碼

3. 若想調用actions中的 setShowSidebar 方法，能夠經過$store.dispatch() 來進行調用。

methods: {
    _hidebar () {
      this.$store.dispatch('setShowSidebar', false)
    }
  }
複製代碼

4. 還有一種方法，能夠經過引入 mapGetters, mapMutations, mapActions 這三個輔助函數來對state倉庫中的數據進行操做。

• ...mapMutations ({}) 獲取mutations中的 sidebar 方法 ，並取名叫sidebar,第3點中的 _hidebar () {this.$store.dispatch('setShowSidebar', false)} 就能夠改寫爲 _hide () {this.sidebar(false)}

• ...mapActions ([]) 獲取actions中的setShowSidebar 方法，與this.$store.dispatch('setShowSidebar'）的做用同樣。

**小提示：mapMutations中用{} mapActions中用[] **

<script>
import { mapGetters,mapMutations,mapActions } from "vuex"
export default {
  computed: {
    ...mapGetters([
     'showSidebar'
    ])
  },
  methods: {
       ...mapMutations({
      sidebar: 'sidebar'
    }),
    ...mapActions([
      'setShowSidebar'
    ])
  }
}
</script>
複製代碼

總結

以上是來自一隻vue學習ing的大胖狗的分享，栗子是簡單通俗的，如有不合理的地方請大佬們輕噴。😘
複製代碼