Vuex狀態管理

Vuex 是一個專爲 Vue.js 設計的狀態管理模式


vuex解決了組件之間同一狀態的共享問題。當咱們的應用遇到多個組件共享狀態時，會須要：

多個組件依賴於同一狀態。傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力。這須要你去學習下，vue編碼中多個組件之間的通信的作法。
來自不一樣組件的行爲須要變動同一狀態。咱們常常會採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝。

以上的這些模式很是脆弱，一般會致使沒法維護的代碼。來自官網的一句話：Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

它採用集中式存儲管理應用的全部組件的狀態。這裏的關鍵在於集中式存儲管理。這意味着原本須要共享狀態的更新是須要組件之間通信的，而如今有了vuex，就組件就都和store通信了。問題就天然解決了。

這就是爲何官網再次會提到Vuex構建大型應用的價值。若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。


Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式


    1.vuex解決了組件之間同一狀態的共享問題  （解決了不一樣組件之間的數據共享）

    2.組件裏面數據的持久化。                



小項目不部建議用vuex   

vuex的使用：
    一、src目錄下面新建一個vuex的文件夾
    二、vuex 文件夾裏面新建一個store.js
    三、安裝vuex  
        cnpm install vuex --save

    四、在剛纔建立的store.js引入vue  引入vuex 而且use vuex

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

        Vue.use(Vuex)

        

    五、定義數據

            /*1.state在vuex中用於存儲數據*/
            var state={

                count:1
            }
   
    六、定義方法     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';


        二、註冊

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

                }
                }
        三、獲取state裏面的數據  

            this.$store.state.數據



        四、觸發 mutations 改變 state裏面的數據
            
            this.$store.commit('incCount');

vuex/store.js

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

Vue.use(Vuex);


/*1.state在vuex中用於存儲數據*/
var state={

    count:1
}

/*2.mutations裏面放的是方法，方法主要用於改變state裏面的數據
*/
var mutations={

    incCount(){

        ++state.count;
    }
}

//vuex  實例化 Vuex.store
const store = new Vuex.Store({
    state,
    mutations
})
export default store;

<template>
    <!-- 全部的內容要被根節點包含起來 -->
    <div id="home">    
       我是首頁組件  -- {{this.$store.state.count}}


        <br>

        <button @click="incCount()">增長數量+</button>
        
       
    </div>
</template>


<script>

    //1. 引入store   建議store的名字不要變

    import store from '../vuex/store.js';

    //2.註冊
    export default{
        data(){
            return {               
               msg:'我是一個home組件',
                value1: null,
             
            }
        },
        store,
        methods:{
            incCount(){
                //改變vuex store裏面的數據

                this.$store.commit('incCount');   /*觸發 mutations 改變 state裏面的數據*/
            }

        }
    }

</script>

<style lang="scss" scoped>
    
</style>