概述

Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化

概述解讀

從vuex的概念中我們可以獲取到以下重點信息：

生命的意義

Vuex為Vue.js而生，是一種數(shù)據(jù)狀態(tài)管理模式

優(yōu)秀之處

1. 數(shù)據(jù)倉庫： 集中式存儲

2. 組件通信： 便于在各個組件之間進(jìn)行數(shù)據(jù)共享专甩、傳遞

3. 單項數(shù)據(jù)流： 遵循特定的規(guī)則，特定的入口改變數(shù)據(jù)，特定的出口輸出數(shù)據(jù)驯遇，同時可監(jiān)測到數(shù)據(jù)的變化過程

   vuex單項數(shù)據(jù)流模式圖

Vuex的基本使用流程 - 簡單計數(shù)器

1. 下載安裝依賴

    npm i vuex -s
   

2. 創(chuàng)建store倉庫，并在vue中掛載

    //  src/store/index.js
    import Vuex from 'vuex'
    import Vue from 'vue'
   
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        // 聲明在倉庫中的數(shù)據(jù)
        state: {
            number: 1
        }
    })
    export default store
    
    // src/main.js
    import store from '@/store'
    new Vue({
        // ...
        store
    })
   

3. 在組件中使用state數(shù)據(jù)

   vuex通過computed計算屬性監(jiān)測數(shù)據(jù)的變化蓄髓，進(jìn)而影響到所有組件中數(shù)據(jù)的狀態(tài)

   a. 計算屬性中使用this.$store.state獲取

    computed: {
        number () {
            return this.$store.state.number
        }
    }
   

   b. 借助輔助函數(shù)mapState實現(xiàn)

    // 組件內(nèi)引入mapState
    import { mapState } from 'vuex'
    
    computed: {
        ...mapState([
            'number'
        ])
    }
   

4. 在store中定義mutations叉庐，改變state狀態(tài)

    new Vuex.Store({
        // ...
        mutations: {
            plus (state) {
                state.number++
            }
        }
    })
   

5. 在各個組件中可以通過提交mutations改變state數(shù)據(jù)

    // src/App.vue
    <template>
        <div id="a-com">
            <h3>state的number: {{ number }}</h3>
            <a-com></a-com>
            <b-com></b-com>
        </div>  
    </template>
    <script>
    import { mapState } from 'vuex'
    import ACom from '@/components/ACom
    import BCom from '@/components/BCom
    export default {
        name: 'App',
        computed: {
            ...mapState([
                'number'
            ])
        },
        components: {
            ACom,
            BCom
        }
    }
    </script>
    
    // src/components/ACom.vue
    <template>
        <div id="a">
            <h3>A組件的number: {{ number }}</h3>
            <button @click="plusNumber">+</button>
        </div>  
    </template>
    <script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        name: 'A',
        computed: {
            ...mapState([
                'number'
            ])
        },
        methods: {
            // 返回需要的mutations函數(shù)
            ...mapMutaions([
                'plus'
            ]),
            plusNumber () {
                // 1. 直接通過store提交mutations
                // 此處plus是mutations中的方法
                // this.$store.commit('plus')
                
                // 2. 使用mapMutations輔助函數(shù)                    this.plus()
            }
        }
    }
    </script>
   

   在src/components/BCom.vue中定義相同的結(jié)構(gòu)

   以上操作后，效果如下圖：

   
   
   組件效果圖

   當(dāng)點擊A+或者B+的按鈕時都會觸發(fā)數(shù)據(jù)倉庫state中的number變化

小結(jié)

通過vuex我們在不同的組件中共享了數(shù)據(jù)会喝，實現(xiàn)了某個組件改變數(shù)據(jù)時陡叠，其他組件同時響應(yīng)

vuex的應(yīng)用場景

1. 檢測用戶是否登錄

    當(dāng)在登錄組件中處理了登錄信息后，存入state倉庫中肢执，可在所有的組件中進(jìn)行用戶數(shù)據(jù)共享枉阵，判斷是否有權(quán)限
   

2. 非父子組件值傳遞

   其實父子組件中也是可以使用vuex，主要看業(yè)務(wù)的復(fù)雜度
   

只要涉及到多組件數(shù)據(jù)進(jìn)行共享预茄、傳遞兴溜，都可以選擇使用vuex

結(jié)語

以上就是胡哥給各位小伙伴帶來的Vuex學(xué)習(xí)之路-入門篇，關(guān)于Vuex中actions、與后端的數(shù)據(jù)請求方式以及多模塊狀態(tài)管理分割內(nèi)容拙徽，請關(guān)注胡哥的下一篇文章：Vuex學(xué)習(xí)之路-進(jìn)階篇

轉(zhuǎn)載須知

原創(chuàng)不易：本文原創(chuàng)首發(fā)于簡書,轉(zhuǎn)載請注明來源地址和作者