vue--vuex詳解

阿新 • • 發佈：2019-01-12

　　Vuex

　　　　什麼是Vuex？

　　　　　　官方說法：Vuex 是一個專為 Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　　　　　個人理解：Vuex是用來管理元件之間通訊的一個外掛

　　　　為什麼要用Vuex？

　　　　　　我們知道元件之間是獨立的，元件之間想要實現通訊，我目前知道的就只有props選項，但這也僅限於父元件和子元件之間的通訊。如果兄弟元件之間想要實現通訊呢？嗯..，方法應該有。拋開怎麼實現的問題，試想一下，當做中大型專案時，面對一大堆元件之間的通訊，還有一大堆的邏輯程式碼，會不會很抓狂？？那為何不把元件之間共享的資料給“拎”出來，在一定的規則下管理這些資料呢？這就是Vuex的基本思想了。

　　　　Vuex有什麼特性？

　　　　怎麼使用Vuex？

　　　　　　引入Vuex.js檔案

　　　　　　建立例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    < 
title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        
    </div>
</body>
<script>
    Vue.use(Vuex);//在建立Vue例項之前
   var myStore =  new Vuex.Store({
        state:{
             
//存放元件之間共享的資料
            name:"jjk"
        },
         mutations:{
             //顯式的更改state裡的資料
         },
         getters:{
             //獲取資料的方法
         },
         actions:{
             //
         }
    });
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)//控制檯
        }
    })
</script>
</html>

　　先解釋上面程式碼的意思：

　　　　new Vuex.Store({}) 表示建立一個Vuex例項，通常情況下，他需要注入到Vue例項裡. Store是Vuex的一個核心方法，字面上理解為“倉庫”的意思。Vuex Store是響應式的，當Vue元件從store中讀取狀態（state選項）時，若store中的狀態發生更新時，他會及時的響應給其他的元件（類似雙向資料繫結）而且不能直接改變store的狀態，改變狀態的唯一方法就是，顯式地提交更改（mutations選項）

　　他有4個核心選項：state mutations getters actions （下文會仔細分析）

　　這是上面程式碼：

　　那如何獲取到state的資料呢？

　　　　一般會在元件的計算屬性（computed）獲取state的資料（因為，計算屬性會監控資料變化，一旦發生改變就會響應）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放元件之間共享的資料
            name:"jjk"
        },
         mutations:{
             //顯式的更改state裡的資料
         },
         getters:{
             //過濾state資料
         },
         actions:{
             //
         }
    });

    Vue.component('hello',{
        template:"<p>{{name}}</p>",
        computed: {
            name:function(){
                return this.$store.state.name
            }
        },
         mounted:function(){
            console.log(this)
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>
</html>

　　在·chrome中顯示：

　　　　　　state：用來存放元件之間共享的資料。他跟元件的data選項類似，只不過data選項是用來存放元件的私有資料。

　　　　　　getters：有時候，我們需要對state的資料進行篩選，過濾。這些操作都是在元件的計算屬性進行的。如果多個元件需要用到篩選後的資料，那我們就必須到處重複寫該計算屬性函式；或者將其提取到一個公共的工具函式中，並將公共函式多處匯入 - 兩者都不太理想。如果把資料篩選完在傳到計算屬性裡就不用那麼麻煩了，getters就是幹這個的，你可以把getters看成是store的計算屬性。getters下的函式接收接收state作為第一個引數。那麼，元件是如何獲取經過getters過濾的資料呢？過濾的資料會存放到$store.getters物件中。具體看一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放元件之間共享的資料
            name:"jjk",
            age:18
        },
         mutations:{
             //顯式的更改state裡的資料
         },
         getters:{
             getAge:function(state){
                 return state.age;
             }
         },
         actions:{
             //
         }
    });

    Vue.component('hello',{
        template:"<p>姓名：{{name}} 年齡：{{age}}</p>",
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            }
        },
         mounted:function(){
            console.log(this)
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>
</html>

　　　　在chrome中顯示：

　　　　mutations：前面講到的都是如何獲取state的資料，那如何把資料儲存到state中呢？在 Vuex store 中，實際改變狀態(state) 的唯一方式是通過提交(commit) 一個 mutation。　　mutations下的函式接收state作為引數，接收一個叫做payload（載荷）的東東作為第二個引數，這個東東是用來記錄開發者使用該函式的一些資訊，比如說提交了什麼，提交的東西是用來幹什麼的，包含多個欄位，所以載荷一般是物件（其實這個東西跟git的commit很類似）還有一點需要注意：mutations方法必須是同步方法！　　具體看例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放元件之間共享的資料
            name:"jjk",
            age:18,
            num:1
        },
         mutations:{
             //顯式的更改state裡的資料
             change:function(state,a){
                //  state.num++;
               console.log(state.num += a); 
               
             }
         },
         getters:{
             getAge:function(state){
                 return state.age;
             }
         },
         actions:{
             //
         }
    });

    Vue.component('hello',{
        template:"<p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>",
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            },
            num:function(){
                return this.$store.state.num
            }
        },
         mounted:function(){
            console.log(this)
        },
        methods: {
            changeNum: function(){
                //在元件裡提交
                // this.num++;
                this.$store.commit('change',10)
            }
        },
        data:function(){
            return {
                // num:5
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>
</html>

　　當點選p標籤前，chrome中顯示：

點選p標籤後：

　　可以看出：更改state的資料並顯示在元件中，有幾個步驟：1. 在mutations選項裡，註冊函式函式裡面裝邏輯程式碼。2.在元件裡，this.$store.commit('change',payload) 注意：提交的函式名要一一對應 3.觸發函式，state就會相應更改 4.在元件的計算屬性裡 this.$store.state 獲取你想要得到的資料

　　　　　　actions：既然mutations只能處理同步函式，我大js全靠‘非同步回撥’吃飯，怎麼能沒有非同步，於是actions出現了...

　　　　　　　　actions和mutations的區別

　　　　　　　　　　1.Actions 提交的是 mutations，而不是直接變更狀態。也就是說，actions會通過mutations，讓mutations幫他提交資料的變更。

　　　　　　　　　　2.Action 可以包含任意非同步操作。ajax、setTimeout、setInterval不在話下

　　再來看一下例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script>
    Vue.use(Vuex);
   var myStore =  new Vuex.Store({
        state:{
            //存放元件之間共享的資料
            name:"jjk",
            age:18,
            num:1
        },
         mutations:{
             //顯式的更改state裡的資料
             change:function(state,a){
                //  state.num++;
               console.log(state.num += a); 
               
             },
             changeAsync:function(state,a){
                 console.log(state.num +=a);
             }
         },
         getters:{
             getAge:function(state){
                 return state.age;
             }
         },
         actions:{
　　　　　　　　//設定延時
             add:function(context,value){
                 setTimeout(function(){
　　　　　　　　　　　//提交事件
                    context.commit('changeAsync',value);
                 },1000)
                 
             }
         }
    });

    Vue.component('hello',{
        template:`
                <div>
                    <p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數：{{num}}</p>
                    <button @click='changeNumAnsyc'>change</button>
                </div>`,
        computed: {
            name:function(){
                return this.$store.state.name
            },
            age:function(){
                return this.$store.getters.getAge
            },
            num:function(){
                return this.$store.state.num
            }
        },
         mounted:function(){
            console.log(this)
        },
        methods: {
            changeNum: function(){
                //在元件裡提交
                // this.num++;
                this.$store.commit('change',10)
            },
　　　　　　　　//在元件裡派發事件 當點選按鈕時，changeNumAnsyc觸發-->actions裡的add函式被觸發-->mutations裡的changeAsync函式觸發



            changeNumAnsyc:function(){
                this.$store.dispatch('add', 5);
            }
        },
        data:function(){
            return {
                // num:5
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)
        }
    })
</script>
</html>

　　　　點選按鈕一秒後，chrome中顯示：

　　　　先整明白 context dispatch是什麼東西：

　　　　　　　　context：context是與 store 例項具有相同方法和屬性的物件。可以通過context.state和context.getters來獲取 state 和 getters。

　　　　　　　　dispatch：翻譯為‘派發、派遣’的意思，觸發事件時，dispatch就會通知actions（跟commit一樣一樣的）引數跟commit也是一樣的。

　　　　action的大體流程：

　　　　　　1.在actions選項裡新增函式（非同步）並提交到對應的函式（在mutation選項裡）中 context.commit('changeAsync',value);

actions:{
             add:function(context,value){
                 setTimeout(function(){
                    context.commit('changeAsync',value);
                 },1000)
                 
             }
         }

　　　　　2.　在元件裡： changeNumAnsyc:function(){this.$store.dispatch('add', 5);} 將dispatch“指向”actions選項裡的函式

　　　　　3.　在mutations選項裡，要有對應的函式 changeAsync:function(state,a){console.log(state.num +=a);}

　　　　總結：

　　　　各個型別的 API各司其職，mutation 只管存，你給我（dispatch）我就存；action只管中間處理，處理完我就給你，你怎麼存我不管；Getter 我只管取，我不改的。　action放在了 methods 裡面，說明我們應該把它當成函式來用（講道理，鉤子函式也應該可以的） mutation是寫在store裡面的，這說明，它就是個半成品，中間量，我們不應該在外面去操作它。getter寫在了 computed 裡面，這說明雖然 getter我們寫的是函式，但是我們應該把它當成計算屬性來用。

　　　　對Vuex的瞭解就先到這了，細節以後在補充。。。。。待續

vue--vuex詳解

Vuex

總結：

vue--vuex詳解

【Vue】詳解Vue生命周期

【Vue】詳解Vue組件系統

關於Vue.use()詳解

Vuex詳解

Vue-multiselect詳解（Vue.js選擇框解決方案）

Vue Router詳解

Vue 指令詳解

react router @4 和 vue路由詳解(二)react-router @4用法

react router @4 和 vue路由詳解(一)vue路由基礎和使用

react router @4 和 vue路由詳解(七)react路由守衛

react router @4 和 vue路由詳解(六)vue怎麼通過路由傳參？

【Vue】詳解元件的基礎與高階用法

vue-cli詳解

前端三大框架Vue框架詳解

前端框架vue.js詳解

Vue例項詳解

Vue-CLI3詳解

七. Vue Router詳解

九. Vuex詳解

vue--vuex詳解

Vuex

總結：

相關推薦

　　Vuex

　　　　總結：