快捷導航

vue--vuex詳解

更新時間：2019年04月15日 14:14:26 作者：游魚與漁

這篇文章主要介紹了vue--vuex的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

Vuex

什么是Vuex？

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

個人理解：Vuex是用來管理組件之間通信的一個插件

為什么要用Vuex？

我們知道組件之間是獨立的，組件之間想要實現(xiàn)通信，我目前知道的就只有props選項，但這也僅限于父組件和子組件之間的通信。如果兄弟組件之間想要實現(xiàn)通信呢？嗯..，方法應(yīng)該有。拋開怎么實現(xiàn)的問題，試想一下，當做中大型項目時，面對一大堆組件之間的通信，還有一大堆的邏輯代碼，會不會很抓狂？？那為何不把組件之間共享的數(shù)據(jù)給“拎”出來，在一定的規(guī)則下管理這些數(shù)據(jù)呢？這就是Vuex的基本思想了。

Vuex有什么特性？

怎么使用Vuex？

引入Vuex.js文件

創(chuàng)建實例：

<!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);//在創(chuàng)建Vue實例之前
  var myStore = new Vuex.Store({
    state:{
      //存放組件之間共享的數(shù)據(jù)
      name:"jjk"
    },
     mutations:{
       //顯式的更改state里的數(shù)據(jù)
     },
     getters:{
       //獲取數(shù)據(jù)的方法
     },
     actions:{
       //
     }
  });
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)//控制臺
    }
  })
</script>
</html>

先解釋上面代碼的意思：

new Vuex.Store({}) 表示創(chuàng)建一個Vuex實例，通常情況下，他需要注入到Vue實例里. Store是Vuex的一個核心方法，字面上理解為“倉庫”的意思。Vuex Store是響應(yīng)式的，當Vue組件從store中讀取狀態(tài)（state選項）時，若store中的狀態(tài)發(fā)生更新時，他會及時的響應(yīng)給其他的組件（類似雙向數(shù)據(jù)綁定）而且不能直接改變store的狀態(tài)，改變狀態(tài)的唯一方法就是，顯式地提交更改（mutations選項）

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

這是上面代碼：

那如何獲取到state的數(shù)據(jù)呢？

一般會在組件的計算屬性（computed）獲取state的數(shù)據(jù)（因為，計算屬性會監(jiān)控數(shù)據(jù)變化，一旦發(fā)生改變就會響應(yīng)）

<!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:{
      //存放組件之間共享的數(shù)據(jù)
      name:"jjk"
    },
     mutations:{
       //顯式的更改state里的數(shù)據(jù)
     },
     getters:{
       //過濾state數(shù)據(jù)
     },
     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：用來存放組件之間共享的數(shù)據(jù)。他跟組件的data選項類似，只不過data選項是用來存放組件的私有數(shù)據(jù)。

getters：有時候，我們需要對state的數(shù)據(jù)進行篩選，過濾。這些操作都是在組件的計算屬性進行的。如果多個組件需要用到篩選后的數(shù)據(jù)，那我們就必須到處重復寫該計算屬性函數(shù)；或者將其提取到一個公共的工具函數(shù)中，并將公共函數(shù)多處導入 - 兩者都不太理想。如果把數(shù)據(jù)篩選完在傳到計算屬性里就不用那么麻煩了，getters就是干這個的，你可以把getters看成是store的計算屬性。getters下的函數(shù)接收接收state作為第一個參數(shù)。那么，組件是如何獲取經(jīng)過getters過濾的數(shù)據(jù)呢？過濾的數(shù)據(jù)會存放到$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:{
      //存放組件之間共享的數(shù)據(jù)
      name:"jjk",
      age:18
    },
     mutations:{
       //顯式的更改state里的數(shù)據(jù)
     },
     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的數(shù)據(jù)，那如何把數(shù)據(jù)存儲到state中呢？在 Vuex store 中，實際改變狀態(tài)(state) 的唯一方式是通過提交(commit) 一個 mutation。　　mutations下的函數(shù)接收state作為參數(shù)，接收一個叫做payload（載荷）的東東作為第二個參數(shù)，這個東東是用來記錄開發(fā)者使用該函數(shù)的一些信息，比如說提交了什么，提交的東西是用來干什么的，包含多個字段，所以載荷一般是對象（其實這個東西跟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:{
      //存放組件之間共享的數(shù)據(jù)
      name:"jjk",
      age:18,
      num:1
    },
     mutations:{
       //顯式的更改state里的數(shù)據(jù)
       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}} 次數(shù)：{{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的數(shù)據(jù)并顯示在組件中，有幾個步驟：1. 在mutations選項里，注冊函數(shù) 函數(shù)里面裝邏輯代碼。2.在組件里，this.$store.commit('change',payload) 注意：提交的函數(shù)名要一一對應(yīng) 3.觸發(fā)函數(shù)，state就會相應(yīng)更改 4.在組件的計算屬性里this.$store.state 獲取你想要得到的數(shù)據(jù)

actions：既然mutations只能處理同步函數(shù)，我大js全靠‘異步回調(diào)'吃飯，怎么能沒有異步，于是actions出現(xiàn)了...

actions和mutations的區(qū)別

1.Actions提交的是 mutations，而不是直接變更狀態(tài)。也就是說，actions會通過mutations，讓mutations幫他提交數(shù)據(jù)的變更。

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:{
      //存放組件之間共享的數(shù)據(jù)
      name:"jjk",
      age:18,
      num:1
    },
     mutations:{
       //顯式的更改state里的數(shù)據(jù)
       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:{
　　　　　　　　//設(shè)置延時
       add:function(context,value){
         setTimeout(function(){
　　　　　　　　　　　//提交事件
          context.commit('changeAsync',value);
         },1000)
         
       }
     }
  });

  Vue.component('hello',{
    template:`
        <div>
          <p @click='changeNum'>姓名：{{name}} 年齡：{{age}} 次數(shù)：{{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)
      },
　　　　　　　　//在組件里派發(fā)事件 當點擊按鈕時，changeNumAnsyc觸發(fā)-->actions里的add函數(shù)被觸發(fā)-->mutations里的changeAsync函數(shù)觸發(fā)


      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：翻譯為‘派發(fā)、派遣'的意思，觸發(fā)事件時，dispatch就會通知actions（跟commit一樣一樣的）參數(shù)跟commit也是一樣的。

action的大體流程：

1.在actions選項里添加函數(shù)（異步）并提交到對應(yīng)的函數(shù)（在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選項里的函數(shù)

3.　在mutations選項里，要有對應(yīng)的函數(shù)changeAsync:function(state,a){console.log(state.num +=a);}

總結(jié)：

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

對Vuex的了解就先到這了，細節(jié)以后在補充。。。。。待續(xù)

以上所述是小編給大家介紹的vue--vuex詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: