vue --- > [全家桶] Vuex

1. Vuex 概述

1.1 元件之間共享資料的方式

• 父向子傳值: v-bind 屬性綁定
• 子向父傳值: v-on 事件綁定
• 兄弟元件之間共享資料: EventBus
• $on: 接收資料的那個元件
• $emit: 發送資料的那個元件

1.2 Vuex是什麼

Vuex: 是實作元件全局狀态(資料)管理的一種機制,可以友善的實作元件之間資料的共享

1.3 使用Vuex統一管理狀态的好處

1. 能夠在vuex中集中管理共享的資料,易于開發和後期維護
2. 能夠高效地實作元件之間地資料共享,提高開發效率
3. 存儲在vuex中的資料都是響應式的,能夠實時保持資料與頁面的同步

[vuex中存儲的資料] : 一般情況下,隻有元件之間共享的資料,才有必存儲到vuex中;對于元件中私有資料,依舊存儲在元件自身的data即可

2. Vuex的基本使用

• 安裝vuex依賴包

npm install vuex --save
           

• 導入vuex包

import Vuex form 'vuex'
Vue.use(Vuex)
           

• 建立store對象

const store = new Vuex.store({
    state: { count: 0 }
})
           

• 将store對象挂在到vue執行個體中

new Vue({
    el: "#app",
    render: h => h(app),
    router,
    store
})
           

3. Vuex的核心概念

3.1 State

State提供唯一的公共資料源,所有共享的資料都要統一放到Store的State中進行存儲

// 建立store資料源,提供唯一公共資料
const store = new Vuex.Store({
    state: { count: 0 }
})
           

元件通路State中資料的第一種方式:

this.$store.state.全局資料名稱
           

元件通路State中資料的第二種方式

// 1. 從 vuex中按需導入mapState函數
import { mapState } from 'vuex'

// 2. 将全局資料,映射為目前元件的計算屬性
computed: {
    ...mapState(['count'])
}
           

3.2 Mutation

• Mutation用于變更Store中的資料,不推薦以下做法改變全局資料(

  this.$store.state.count

  )

<template>
  <div>
    <h3>目前最新的count值為: {{$store.state.count}} </h3>
    <button @click="btnHandler1">+1</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    btnHandler1() {
      this.$store.state.count++
    }
  }
}
</script>

           

1. 隻能通過mutation變更store資料,不可以直接操作Store中的資料
2. 這種方式可以集中監控所有資料的變化

3.2.1 $store.commit

// 定義Mutation
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        add(state) {
            // 變更狀态
            state.count++
        }
    }
})

// 觸發mutation
methods:{
    handle1() {
        this.$store.commit('add')
    }
}
           

可以在觸發mutations時傳遞參數:

// 定義mutation
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addN(state, step){
            // 變更狀态
            state.count += step
        }
    }
})

// 觸發mutation
methods:{
    handle2(){
        this.$store.commit('addN', 3)
    }
}
           

3.2.2 mapMutations

// 1. 從vuex中按需導入mapMutations函數
import { mapMutations } from 'vuex'

// 2. 将指定的mutations函數,映射為目前元件的methods函數
methods:{
    ...mapMutations(['add','addN'])
}
           

3.3 Action

3.3.1 $store.dispatch

• Action用于處理異步任務
• 如果通過異步操作變更資料,必須通過Action,而不能使用Mutation,但是在Action中還是要通過觸發Mutation的方式間接變更資料

// 定義action
const store = new Vuex.Store({
    mutations: {
        add(state) {
            state.count++
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(()=>{
                context.commit('add')
            }, 1000)
        }
    }
})

// 觸發action
methods{
    handle(){
        this.$store.dispatch('addAsync')
    }
}
           

• 攜帶參數的actions異步任務

// 定義Action
const store = new Vuex.Store({
    mutations: {
        addN(state, step) {
            state.count += step
        }
    },
    actions: {
        addNAsync(context, step){
            setTimeout(()=>{
                context.commit('addN', step)
            }, 1000)
        }
    }
})
// 觸發Action
methods:{
    handle(){
        this.$store.dispatch('addNAsync', 5)
    }
}
           

3.3.2 mapActions

// 1. 從 vuex中按需導入 mapActions函數
import { mapActions } from 'vuex'

// 2. 在methods中使用
methods:{
    ...mapActions['addAsync','addNAsync']
}
           

3.4 Getter

3.4.1 $store.getters

• 用于對Store中的資料進行處理形成新的資料
  • 可以對Store中已有的資料加工處理之後形成新的資料,類似Vue的計算屬性
  • Store中資料發生變化,Getter的資料也會跟着變化

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters:{
        showNum: state => {
            return '目前最新的數量是['+ state.count +']'
        }
    }
})

           

<!-- 調用 -->
<template>
    <h3>
        {{$store.getters.showNum}}
    </h3>
</template>
           

3.4.2 mapGetters

import { mapGetters } from 'vuex'

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