什么是Vuex

• Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化谍咆。
• vuex是采用集中式管理組件依賴的共享數(shù)據(jù)的一個工具纵揍，可以解決不同組件數(shù)據(jù)共享問題。

1. 大家都知道兄弟組件之間的傳值是用到事件總線EventBus來進(jìn)行的垛玻，當(dāng)然也可以通過父組件作為橋梁進(jìn)行傳值割捅，

2. 那么遇到孫子組件時傳值就會比較麻煩，所以eventbus只是小型項(xiàng)目考慮的帚桩，當(dāng)項(xiàng)目大起來的時候亿驾，就考慮使用vuex（因?yàn)槭枪俜降挠H兒子- - ）

   
   

圖解：

1. 修改 state狀態(tài)必須通過mutations
2. mutations只能執(zhí)行同步代碼，
3. ajax账嚎、settimeout等異步請求莫瞬，需要需用actions，在把數(shù)據(jù)交給mutations
4. state共享狀態(tài)數(shù)據(jù)可以在組件中調(diào)用
5. 組件中可以調(diào)用actions

vuex基礎(chǔ)-初始化功能

建立一個新的腳手架項(xiàng)目, 在項(xiàng)目中應(yīng)用vuex

$ vue create demo

初始化項(xiàng)目

npm i vuex --save -- 安裝到運(yùn)行時依賴
開發(fā)時依賴 就是開開發(fā)的時候郭蕉，需要的依賴疼邀，運(yùn)行時依賴，項(xiàng)目上線運(yùn)行時依然需要的

// 引入Vuex 的步驟
// 2.引入庫
import Vuex from 'vuex'
// 3. 注冊（其實(shí)是執(zhí)行了Vuex內(nèi)的install方法
Vue.use(Vuex)
// 4. 倉庫實(shí)例化
const store = new Vuex.Store({
  // 這里放配置
})

new Vue({
  // 5. 在根實(shí)例配置 store 選項(xiàng)指向 store 實(shí)例對象
  store,
  render: h => h(App),
}).$mount('#app')

vuex基礎(chǔ)-state

state是放置所有公共狀態(tài)的屬性召锈，如果你有一個公共狀態(tài)數(shù)據(jù) 旁振， 你只需要定義在 state對象中
定義state

const store = new Vuex.Store({
  state: {
    // 管理數(shù)據(jù)
    count: 0
  }
})

怎么在組件中獲取count？

原始形式- 插值表達(dá)式
組件中可以使用 this.$store 獲取到vuex中的store對象實(shí)例涨岁，可通過state屬性屬性獲取count

1. 導(dǎo)入mapState

import { mapState } from "vuex";

2. 采用數(shù)組形式引入state屬性,并用擴(kuò)展運(yùn)算符將導(dǎo)出的狀態(tài)映射給計(jì)算屬性

  computed: {
    ...mapState(["count"]),
  },

3. 使用

<div>{{ count }}</div>

vuex基礎(chǔ)-mutations

state數(shù)據(jù)的修改只能通過mutations，并且mutations必須是同步更新梢薪，目的是形成數(shù)據(jù)快照
mutations是一個對象蹬铺，對象中存放修改state的方法
Vuex中mutations中要求不能寫異步代碼，如果有異步的ajax請求秉撇，應(yīng)該放置在actions中
定義mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定義mutations
  mutations: {
    // 第一個參數(shù)是store的state屬性
    addCount(state) {
      state.count++
    }
  }
})

如何在組建中調(diào)用mutations甜攀？
原始形式-$store

<script>
export default {
    methods: {
    //   調(diào)用方法
      addCount () {
         // 調(diào)用store中的mutations 提交給muations
        // commit('muations名稱')
        this.$store.commit('addCount')  // 直接調(diào)用mutations
    }
  }
}
</script>

帶參數(shù)的傳遞

 mutations: {
    // 第一個參數(shù)是store的state屬性，第二是用戶傳遞的參數(shù)
    addCount(state, data) {
      state.count += data
    }
  }


  methods: {
    // ...mapMutations(["addCount"]),
    addCount() {
      // 調(diào)用store中的mutations 提交給muations
      // commit('muations名稱', 10)
      this.$store.commit("addCount", 10); // 直接調(diào)用mutations
    },
  },

輔助函數(shù) - mapMutations
mapMutations和mapState很像畜疾，它把位于mutations中的方法提取了出來赴邻，我們可以將它導(dǎo)入

<button @click="addCount(10)">count+10</button>

  import  { mapMutations } from 'vuex'

  methods: {
    ...mapMutations(["addCount"]),
    // addCount() {
    //   // 調(diào)用store中的mutations 提交給muations
    //   // commit('muations名稱', 10)
    //   this.$store.commit("addCount", 10); // 直接調(diào)用mutations
    // },
  },

vuex基礎(chǔ)-actions
state是存放數(shù)據(jù)的，mutations是同步更新數(shù)據(jù)啡捶，actions則負(fù)責(zé)進(jìn)行異步操作
定義actions

 actions: {
   //  獲取異步的數(shù)據(jù) context表示當(dāng)前的store的實(shí)例 
   // 可以通過 context.state 獲取狀態(tài)
  //  也可以通過context.commit 來提交mutations姥敛， 
 //   也可以 context.diapatch調(diào)用其他的action
    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒鐘之后 要給一個數(shù) 去修改state
        context.commit('addCount', 100)
      }, 1000)
    }
 } 

原始調(diào)用 - $store

 addAsyncCount () {
     this.$store.dispatch('getAsyncCount')
 }

傳參調(diào)用

<button @click="getAsyncCount(100)">count+100</button>


  methods: {
    getAsyncCount(data) {
      this.$store.dispatch("getAsyncCount", data);
    }
 },

輔助函數(shù) -mapActions
actions也有輔助函數(shù)，可以將action導(dǎo)入到組件中

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount'])
}

vuex基礎(chǔ)-getters

除了state之外瞎暑，有時我們還需要從state中派生出一些狀態(tài)彤敛，這些狀態(tài)是依賴state的与帆，此時會用到getters
例，state中定義 1-10 list數(shù)組

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

組件中墨榄，需要顯示所有大于5的數(shù)據(jù)玄糟，正常的方式，是需要list在組件中進(jìn)行再一步的處理袄秩，但是getters可以幫助我們實(shí)現(xiàn)它
定義getters

  getters: {
    // getters函數(shù)的第一個參數(shù)是 state
    // 必須要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

如何使用getter
原始方式 -$store

<div>{{ $store.getters.filterList }}</div>

輔助函數(shù) - mapGetters

 <div>{{ filterList }}</div>


import { mapGetters } from "vuex";

computed: {
    ...mapGetters(['filterList'])
}