Vuex的通俗詳解

什麼是vuex?

vuex是一種最好的非父子元件傳值的方案

官方解釋：乙個公共的狀態管理v
​其實vuex就是乙個公共的記憶體物件，把所有元件需要共有的狀態放在乙個公共的記憶體空間中，
並且給每乙個狀態做了乙個資料劫持（給每乙個狀態新增了乙個getter和setter方法）。

$ cnpm install vuex -s

or $ yarn add vuex

import vuex from 'vuex'

vue.use(vuex)

const store = new vuex.store()

new vue()

vuex資料傳遞的流程

1、通過new vuex.store()建立乙個倉庫 state是公共的狀態，state--->components渲染頁面

2、在元件內部通過this.$store.state.屬性 來呼叫公共狀態中的state，進行頁面的渲染。
3、當元件需要修改資料的時候，必須遵循單向資料流。通過this.$store.dispatch來觸發actions中的方法
4、actions中的每個方法都會接受乙個物件 這個物件裡面有乙個commit方法，用來觸發mutations裡面的方法
5、mutations裡面的方法用來修改state中的資料 mutations裡面的方法都會接收到2個引數 
乙個是store中的state 另外乙個是需要傳遞到引數
6、當mutations中的方法執行完畢後state會發生改變，因為vuex的資料是響應式的 所以元件的狀態也會發生改變
操作流程
元件內部進行操作
methods : 

}
用上述dispatch執行actions裡面的handleactionadd方法：

actions : ,params)

},


mutions內部的方法

mutations : 

}

注意：不要在元件內部修改store裡面的資料

​為什麼必須遵循資料流程：
1：更加明確的追蹤到狀態的變化
2：通過vue-devtools來進行時間旅行的狀態監測
3: 如果涉及到資料的非同步獲取( 在actions裡面做axios資料請求以及業務邏輯處理 ),我們必須要走vuex的資料流程
補充: 如果不涉及到非同步資料處理我們可以跨越actions直接在元件內部 用this.$store.commit('mutations裡面的方法')即可
eg:this.$store.commit('handlemutationsinputchange',e.target.value);
輔助函式

輔助函式就是通過對映的關係將vuex中的方法或者狀態對映給元件的某一屬性,輔助函式的返回值是乙個物件
( 1 ) state的輔助函式mapstate

​

import  from 'vuex';
//mapstate函式繫結在元件中的computed上面,
export default
//這樣元件中直接使用 }   }  }  } 即可
/**/​​
​//computed : mapstate(['a','b','c','d']) mapstate會占用computed 讓元件中的其他計算無法新增,可以選用 ...物件擴充套件符號進行寫入
export default
}即可 )  
namea : state =>state.a,
nameb : state =>state.b,
namec : state =>state.c,
named : state =>state.d,
})}}​/*
*/
( 2 ) mutations的輔助函式 mapmutations

import  from 'vuex';

//mapmutations輔助函式必須對映在元件的methods上面
//點選
//handleupdatea 函式就是 store資料夾index.js中 mutations裡面的方法​//
語法1:  後面是陣列
methods: 
//語法2:  後面是物件( 推薦 )
//點選
methods: )
}
( 3 ) actions的輔助函式 mapactions

import  from 'vuex';

//mapmutations輔助函式必須對映在元件的methods上面
//點選
//handleupdatea 函式就是 store資料夾index.js中 actions裡面的方法​//
語法1:  後面是陣列
methods: 
//語法2:  後面是物件( 推薦 )
//點選
methods: )
}
( 4 ) getters的輔助函式 mapgetters

import  from 'vuex';

//注:mapgetters必須對映到 computed 上面​//
語法1: 陣列
computed : ​//
語法2: 物件
computed : )
}

1: vuex的資料傳遞流程

2: vuex的資料重新整理瀏覽器丟失了如果解決
3:什麼時候用到vuex
a:並不是所有的專案都用到vuex
b:只有複雜的中大型專案才會用到vuex
c:如果小型專案用到vuex會導致專案執行速度特別慢
4:vuex中常用的配置項是哪些?每乙個的作用是什麼
5:vuex的底層原理?
				
Vuex的初步使用詳解
vuex 一般用來解決某些值，在不同的元件中都要用到，如果兩個元件經過路由直達傳參還好，一旦是跨了好幾層路由之間傳參，比如想要登入後的token,登入後的使用者名稱。購物車的數量顯示等，有些還要實時更新。不可能一直傳來傳去。這個時候使用vuex。資料儲存在state中，想要更改必須通過 mutati...
				
vuex幾大模組和Vuex助手使用詳解
vuex 是乙個專為 vue.js 應用程式開發的狀態管理庫，用於儲存用用程式的狀態，即資訊或資料，使得vuex使應用程式的所有元件可以共享資料。每乙個 vuex 應用的核心就是 store 倉庫 包含著你的應用中大部分的狀態 state 改變 store 中的狀態的唯一途徑就是顯式地提交 comm...
				
vuex中mapActions用法詳解
一般而言，我們使用this.store.dispatch 來觸發action操作，有多少action需要被觸發，就需要寫多少個this.store.dispatch 方法 從而更加簡便的方式出現了，他就是mapactions，mapactions就是將元件中的事件函式對映為對應的action，其中事...