一文讓你徹底搞懂Vuex，滿滿的干貨
官方解釋：Vuex 是專為 vue.js 應用程序開發的狀態管理模式。
一、Vuex 是做什么呢?
什么是狀態管理?
簡單地講：可以把多個組件都需要的變量全部存儲到一個對象里面，然后這個對象放在頂層的 vue 實例中，讓其他組件可以使用。這樣多個組件就可以共享這個對象中的所有屬性。
有些同學想著，這么簡單我們自己在vue頂層定義一個對象不就可以實現共享了?我們發現雖然數據可以獲取到，但是如果在某個組件內，數據改變了，那我們如何修改數據，讓此數據在其他組件內保持最新呢?
我們的vuex就是為了提供一個在多個組件間共享狀態的插件，而且能夠實現實時響應。
二、Vuex 使用
vuex 是管理組件之間通信的一個插件，所以使用之前必須安裝。
2.1、安裝
1）使用 script 方式引入
- <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
2）使用包管理
- npm install vuex --save //yarn add vuex
注意：vuex 必須依賴 vue 使用
2.2、搭建 store 實例
創建一個 store 文件夾，新建 index.js
- import Vue from "vue";
- import Vuex from "vuex";
- Vue.use(Vuex);//使用vuex
- export default new Vuex.Store({
- state:{},
- mutations:{},
- getters:{},
- actions:{},
- modules:{}
- })
在 main.js 處，掛載 store
- import store from './store'
- new Vue({
- router,
- render: h=>h(App)
- })
- //相當于
- // Vue.prototype.$store = store
2.3、使用狀態
- // store 中定義狀態
- state:{
- statue: '在線'
- }
- //在組件內使用
- <div>組件內數據：{{ $store.state.status }} </div>
- //在 js 中使用
- mounted(){
- console.log( this.$store.state.status )
- }
三、Vuex 的五大核心
3.1、state
state 存放 vuex 的基本數據，用來存儲變量的。
單一狀態樹
Vuex 使用單一狀態樹，即用一個對象就包含了全部的狀態數據。state 作為構造器選項，定義了所有我們需要的基本狀態參數。
在組件中引用 state 數據方式：
1）通過 vue 的 computed 獲取 vuex 的 state
- export default new Vuex.Store({
- state:{
- online:true
- }
- })
- computed:{
- status(){
- return this.$store.state.online
- }
- }
store 中的數據發生改變時，都會重新求取計算屬性，并更新相關 DOM。
2）如果需要使用多個參數時，都使用 computed 計算屬性，就會使代碼變的有些冗余和復雜，此時我們就可以借助 mapState 輔助函數。
- //state 中數據比較多，引用到一個組件內
- export default new Vuex.Store({
- state:{
- online:true,
- per:[
- {name:'qq',age:18}
- ],
- role:'管理員'
- }
- })
- //組件內
- import { mapState } from 'vuex'
- export default {
- name: 'App',
- computed: mapState({
- online: state => state.online,
- per: 'per', // 'per'就相當于 state.per
- role: 'role' // 'role'就相當于 state.role
- })
- }
vuex 使用單一狀態樹來管理應用層級的全部狀態，單一狀態樹能夠讓我們最直接的方式找到某個狀態的片段，而且之后的維護和調試過程，也可以非常方便管理和維護。
3.2、getters
從 store 中獲取一些 state 變異后的狀態。
使用的時候一般有兩種方式：
1）返回的結果只依賴于 state 中的數據
- export default new Vuex.Store({
- state:{
- count:2,
- },
- getters:{
- //返回 count 的 2 倍數據
- countDouble(state){
- return state.count*2
- }
- }
- })
- //組件中引用
- <div> 獲取countDouble：{{ $store.getters.countDouble }} </div>
- //運行結果
- 獲取countDouble：4
此處，$store.getters.countDouble 的使用與上邊的 $store.state.count 是一樣的。
2）getters 中返回的變異結果，依賴于某個 getters 中屬性返回結果
- export default new Vuex.Store({
- state:{
- count:2,
- },
- getters:{
- //返回 count 的 2 倍數據
- countDouble( state ){
- return state.count * 2
- }
- //返回 countDouble 的 2 倍數據
- countDoubleT( state , getters ){
- return getters.countDouble * 2
- }
- }
- })
- //組件中引用
- <div> 獲取countDouble：{{ $store.getters.countDoubleT }} </div>
- //運行結果
- 獲取countDouble：8
3.3、mutations
vuex 的store 狀態的更新唯一方式：提交 Mutation。
Mutations 主要包括兩部分：
字符串的事件類型
一個回調函數，該回調函數的第一個參數就是 state。
1）mutation 中的方法通過 commit 調用，不傳參數使用：
- export default new Vuex.Store({
- state:{
- count:2,
- },
- mutations:{
- incrs(state){
- // count 加 1
- state.count++
- }
- }
- })
- //組件調用
- <button @click=" $store.commit('incrs') " >+</button>
- {{$store.state.count}}
按鈕每點一次，count 就會自加一次。
2）mutations 傳遞參數
我們點擊加按鈕時，指定每次點擊增加的數值，如下：
- export default new Vuex.Store({
- state:{
- count:2,
- },
- mutations:{
- addNum( state,n ){
- // count 加 1
- state.count +=n
- }
- }
- })
- //組件調用
- <button @click=" $store.addNum( 'incrs' , 5 ) " >+</button>
- {{$store.state.count}}
- //運行結果
- 每點一次按鈕，count 增加 5
上個實例傳遞的是一個參數，如果我們需要傳遞多個參數時，該如何實現呢?
3）mutations 傳遞多個參數
- export default new Vuex.Store({
- state:{
- count:2,
- },
- mutations:{
- addNum(state,payload){
- // payload 是傳遞過來的參數對象
- state.count += payload.count
- }
- }
- })
- //組件調用
- <button @click="addTen" >加10</button>
- {{$store.state.count}}
- export default{
- methods:{
- addTen(){
- this.$store.commit({
- type:'addNum',
- count:10,
- ...//可以傳任意多個參數
- })
- }
- }
- }
- //運行結果
- 每點一次按鈕，count 增加 10
上述方法是 mutations 特殊的提交封裝。包含了 type 屬性的對象，將整個 commit 的對象作為 payload 使用。
3.4、actions
mutations 提交更新數據的方法，必須是同步的，如果是異步使用就會出現問題，然后在項目開發中往往就會用到異步更新，比如網路請求數據。
actions 是類似于 mutation，功能大致相同，但是 actions 是用來替代 mutations 進行異步操作的。
1）actions 的基本使用
- actions:{
- aUpdateCount(context){
- setTimeout(()=>{ //使用定時器模擬異步操作
- context.commit('updateCount')
- },2000)
- }
- },
- mutations:{
- updateCount(state){
- state.count = 5201314
- },
- }
- // 組件內使用
- {{$store.state.count}}
- <button @click="$store.dispatch('aUpdateCount')">異步更新count</button>
- //運行結果
- 點擊按鈕，兩秒后更新 count 值為5201314
值得注意的是，使用 actions 異步更新數據的時候，還是需要經過 mutations 中的方法，state 中的數據只能由 mutations 中的方法修改。
調用 mutations 中的方法，使用 commit 調用。
調用 actions 中的方法，使用 dispatch 調用。
2）異步更新的時候，也可以帶參數
- // 功能：點擊按鈕，指定 count 修改的值
- actions:{
- aUpdateCount( context, payload ){
- setTimeout(()=>{ //使用定時器模擬異步操作
- context.commit( 'updateCount' , payload )
- },2000)
- }
- },
- mutations:{
- updateCount( state , payload ){
- state.count = payload
- },
- }
- // 組件內使用
- {{$store.state.count}}
- <button @click="$store.dispatch( 'aUpdateCount', '我愛前端' )">異步更新count</button>
- //運行結果
- 點擊按鈕，兩秒后更新 count 值為: 我愛前端
3）傳入異步參數
- actions:{
- //傳入promise
- updateData(context,payload){
- return new Promise((resolve,reject)=>{
- setTimeout(()=>{
- resolve('我學會了')
- },2000)
- })
- },
- }
- //組件內調用
- <button @click="ok">promise執行成功，返回"我學會了"</button>
- methods:{
- ok(){
- this.$store.dispatch('updateData').then((res)=>{
- console.log(res)
- })
- },
- }
- //運行結果
3.5、modules
modules 是模塊的意思，vue 使用單一狀態樹，項目越來越大，store 中的數據越來越多，不便于數據的管理和維護，代碼也會變得臃腫。因此使用 modules ，把數據劃分到對應的某個模塊，既便于開發，也提高代碼的可讀性。
1）modules 簡單使用
- import Vue from 'vue'
- import Vuex from 'vuex'
- import { Increase } from './mutation_type.js'
- Vue.use(Vuex)
- export default new Vuex.Store({
- state: {},
- actions: {},
- getters: { },
- mutations: { },
- modules:{
- a:{
- state:{},
- getters:{},
- mutations:{},
- actions:{}
- },
- b:{
- state:{},
- getters:{},
- mutations:{},
- actions:{}
- }
- },
- })
- //也可以整理為
- const moduleA = {
- state:{},
- getters:{},
- mutations:{},
- actions:{}
- }
- const moduleB = {
- state:{},
- getters:{},
- mutations:{},
- actions:{}
- }
- Vue.use(Vuex)
- export default new Vuex.Store({
- state: {},
- actions: {},
- getters: { },
- mutations: { },
- modules:{
- a: moduleA,
- b: moduleB
- },
- })
2）模塊中的數據如何使用呢?
- const moduleA = {
- state:{
- aName:'我是模塊a的數據'
- },
- getters:{},
- mutations:{},
- actions:{}
- }
- // 組件內引用
- {{ $store.state.a.aName }}
3）調用模塊內的 mutations 中的方法，如何調用呢?
- $store.commit('aChangeName')
調取模塊內的 mutations 中的方法，與之前是一模一樣的，程序會先從第一層 store 中查找方法，找不到方法時會繼續去模塊中查找。
4）調用模塊內的 getters 內方法
- $store.getters.getName
需要注意的是，getters 中方法都是對 state 中數據變異，如果模塊的 getters 方法需要根 store 中的 state 呢?
- getName(state，getters , rootState){
- // state 表示當前模塊的 state
- // getters表示當前模塊的getters
- //rootState 表示根 store 內的state
- }
5）模塊內的 actions 中的方法，使用 commit 調用 mutations 中方法時，只能調用本模塊內的 mutations 方法，不能調用外層的。
四、Vuex 數據響應原理
Vuex 的 store 中的 state 是響應式的，當 state 中數據發生改變時，vue 組件會自動更新。這就要求我們必須遵守一些vuex對應的規則：
提前在 store 中初始化好所需的屬性。
說人話，就是必須在state中定義的屬性才能做到響應式，如果是后加或刪除的，無法做到響應式。
舉個栗子：
- mutations:{
- changeName(state){
- state.info.name = '愛學習的前端人'
- },
- addAdrs(state){
- state.info['address'] = "陜西西安"
- },
- }
- {{this.$store.state.info}}
- <button @click="$store.commit('changeName')">修改姓名</button>
- <button @click="$store.commit('addAdrs')">增加地址</button>
此時點擊修改姓名的時候，可以做到響應式，而點擊“增加地址”按鈕時，頁面沒有任何反應，但是在開發者模式中可以看到數據有變化。
我們要響應式，該如何實現呢?
- addAdrs(state){
- state.info['address'] = "陜西西安"
- //修改為：
- Vue.set(state.info,'address','陜西西安')
- },
同樣的如果要刪除 age 屬性時，使用 delete 也做不到響應式，需要修改為 Vue.delete。
實例：響應式刪除 age 屬性
- deleteAge(state){
- //delete state.info.age
- //修改為
- Vue.delete(state.info,'age')
- },
- //組件內容
- {{this.$store.state.info}}
- <button @click="$store.commit('deleteAge')">刪除年齡</button>
五、類型常量
在 mutation 中定義很多事件類型，也就是方法名。當項目越來越大時，Vuex 管理的狀態越來越多，需要更新狀態的情況越來越多，那么意為著 Mutations 中的方法名越來越多，方法過多時，使用的時候需要花費大量精力去記住或來回切換文件找方法名，這樣很容易出錯，所以推薦大家使用一個常量，即使方法名出錯了，也會將錯就錯，程序并不會發生異常。
如：
- // 新建 mutation_type.js 文件
- //導出一個常量
- export const Increase = 'increase'
- // store.js文件
- import Vue from 'vue'
- import Vuex from 'vuex'
- import { Increase } from './mutation_type.js'
- Vue.use(Vuex)
- export default new Vuex.Store({
- state:{
- count:2,
- },
- mutations:{
- [Increase](state){
- state.count++
- },
- }
- })
- //組件內容
- {{ $store.state.count }}
- <button @click="add">加10</button>
- import { Increase } from './store/mutation_type'
- sxport default{
- methods:{
- add(){
- this.$store.commit(Increase)
- }
- }
- }
使用的時候，只需要記住 Increase 或者在 mutation_type.js 文件內查找就好了。
