vuex總結

時間  2019-11-07
標籤 vuex 總結 简体版
原文   原文鏈接

　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咱們寫的是函數，可是咱們應該把它當成計算屬性來用。
 
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程