1. 程式人生 > >Vue學習之旅----vuex解決了元件之間同一狀態的共享問題

Vue學習之旅----vuex解決了元件之間同一狀態的共享問題

Vuex 是一個專為 Vue.js 設計的狀態管理模式
vuex解決了元件之間同一狀態的共享問題。當我們的應用遇到多個元件共享狀態時,會需要:多個元件依賴於同一狀態。傳參的方法對於多層巢狀的元件將會非常繁瑣,並且對於兄弟元件間的狀態傳遞無能為力。這需要你去學習下,vue編碼中多個元件之間的通訊的做法。
來自不同元件的行為需要變更同一狀態。我們經常會採用父子元件直接引用或者通過事件來變更和同步狀態的多份拷貝。

以上的這些模式非常脆弱,通常會導致無法維護的程式碼。來自官網的一句話:Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。

它採用集中式儲存管理應用的所有元件的狀態。這裡的關鍵在於集中式儲存管理。這意味著本來需要共享狀態的更新是需要元件之間通訊的,而現在有了vuex,就元件就都和store通訊了。問題就自然解決了。

這就是為什麼官網再次會提到Vuex構建大型應用的價值。如果您不打算開發大型單頁應用,使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單,您最好不要使用 Vuex。

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式
    1.vuex解決了元件之間同一狀態的共享問題  (解決了不同元件之間的資料共享)

    2.元件裡面資料的持久化。                

小專案不部建議用vuex   

vuex的使用:    

    1、src目錄下面新建一個vuex的資料夾

    2、vuex 資料夾裡面新建一個store.js
    3、安裝vuex  

        cnpm install vuex --save

    4、在剛才建立的store.js引入vue  引入vuex 並且use vuex

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

        Vue.use(Vuex)        

    5、定義資料

            /*1.state在vuex中用於儲存資料*/
            var state={

                count:1
            }   
 
    6、定義方法     mutations裡面放的是方法,方法主要用於改變state裡面的資料

        var mutations={

            incCount(){

            ++state.count;
            }
        }   


    暴露

        const store = new Vuex.Store({
            state,
            mutations
        })        
        export default store;
組建裡面使用vuex:
        1.引入 store

             import store from '../vuex/store.js';
        2、註冊

             export default{
                data(){
                    return {               
                       msg:'我是一個home元件',
                    value1: null,                     
                    }
                },
                store,
                methods:{
                    incCount(){                      
                    this.$store.commit('incCount');   /*觸發 state裡面的資料*/
                    }

                }
                }
        3、獲取state裡面的資料  

            this.$store.state.資料

        4、觸發 mutations 改變 state裡面的資料
            
            this.$store.commit('incCount');