Vuex基礎

Vuex是什麼?

• 一個專爲Vue.js應用程序開發的狀態管理模式
• 項目複雜使用vuex能夠簡化邏輯,可是項目簡單使用時則會增長邏輯

總結上圖:

• Actions發送請求,響應成功後把數據提交給Mutations
• Mutations接受到數據後,去更新State中的數據
• State管理的數據是響應式的,當數據改變時渲染視圖

Vuex使用步驟:

• npm i vuex
• import vuex from 'vuex'
• Vue.use(vuex)
• const store = new Vuex.Store({})
• 在根組件配置store選項指向store實例對象

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({

})
new Vue({
  el: '#app',
  // 掛載後,全部的組件都會有一個$store
  store 
})
複製代碼

state

• 做用申明數據，提供給其餘組件使用，在組件中computed(計算屬性)去使用

// 實例化store對象申明數據
new Vuex.Store({
    // state 管理數據
    state: {
        count: 100
    }
})
// 在組件中使用:
<template>
    <!--直接使用-->
    <p>{{$store.state.count}}</p>
    <!--經過計算屬性使用-->
    <p>{{count}}</p>
</template>
<script>
    export default {
        computed: {
            count () {
                return $store.state.count
            }
        }
    }
</script>
複製代碼

mapState

• 當一個組件須要獲取多個狀態時,將這些狀態都聲明爲計算屬性會重複和冗餘,這是咱們能夠使用mapState輔助函數幫助咱們生成計算屬性
• 把state中的數據映射成計算屬性
• 對象寫法:

import {mapState} from 'vuex'
export default {
    data () {
        return {
            msg: 'XXX'
        }
    }
    computed: mapState({
        // 箭頭函數
        count: state => state.count,
        // 傳字符串參數'count' 等同於'state => state.count'
        count: 'count',
        // 在使用state中的數據時,若是依賴組件內部的數據,必須使用常規函數
        count(state) {
            return state.count + this.msg
        }
    })
}
複製代碼

• 數組寫法

computed: mapState(['count'])   --->至關於{count: function(state){return state.count}}
複製代碼

• 平常開發中使用展開符的寫法:(能夠寫外部的映射屬性,也能夠寫內部的計算屬性)

computed: {
    ...mapState(['count'])
}
複製代碼

mutations

• 更改Vuex的store中的狀態的惟一方法是提交mutation.Vuex中的mutation相似於事件.

// 實例化store對象申明: mutation必須同步執行
new Vuex.Store({
    // state    管理數據
    state: {
        count: 100
    },
    // mutations 修改數據
    mutations: {
        increment(state) {
            // 變動狀態
            state.count++
        }
    }
})
// 在組件中使用: 
// 默認提交
methods: {
    fn() {
        //調用mutations中的increment
        this.$store.commit('increment')
    }
}
// 提交傳參
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
複製代碼

this.$store.commit('increment', {
  amount: 10
})
複製代碼

mapMutations

• vuex提供的輔助函數 在methods中映射函數的

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
  // 數組寫法
    ...mapMutations([
      'increment'      // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`
    ]),
  // 對象寫法
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
    })
  }
}
複製代碼

Actions

• Action相似於mutation,區別:
  • Action提交給mutation,而不是直接變動狀態
  • Action能夠包含任意異步操做

  // 在實例化store對象申明:
  const store = new Vuex.Store({
  state: {
      count: 0
  },
  mutations: {
      increment (state) {
      state.count++
      }
  },
  // actions 異步操做 獲取後臺數據
  actions: {
      getData (context) {
          setTimeout(()=>{
              // 數據獲取成功
              context.commit('increment')
          }，1000)  
      }
  }
  }) 
  // 在組件中調用,也能夠提交參數
  this.$store.dispatch('getData')
  複製代碼

mapActions

• vuex提供的輔助函數 在methods中映射函數的

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'getData', // 將 `this.increment()` 映射爲 `this.$store.dispatch('getData')`
    ]),
    ...mapActions({
      add: 'getData' // 將 `this.add()` 映射爲 `this.$store.dispatch('getData')`
    })
  }
}
複製代碼