vuex是一個專門為vue.js應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，
并以相應的規則保證狀態已一種可預測的方式發生變化，
在構建一個中大型單頁應用的時候，vuex就可以幫你更好的在組件外部管理狀態，
vuex是模仿redux而開發的，redux由Flux演變而來，但是受Elem的啟發，避開了Flux的復雜性，
vuex>redux>flux>Elm
每一個vuex的核心就是stroe(倉庫)物件，store是一個容器，包含著大部分的狀態(data)
vuex的狀態存盤是回應式的，當vue組件從store中讀取狀態的時候，若store中的狀態發生變化，那么相應組件也會得到更新，
不能直接改變store中的狀態，改變store中的狀態的唯一途徑是提交mutations，這樣使我們可以方便地跟蹤每一個狀態的變化，
總而讓我們能夠實作一些工具幫助我們更好的了解我們的應用，
在vue單檔案里使用vuex，必須注冊Vue.use（vuex）
創建一個倉庫物件，方法的引數就是倉庫的配置資訊
1.state，代表倉庫資料狀態
2.getters，獲取倉庫的資料屬性，相當于組件的計算結果(computed)，其他組件可以通過倉庫的gettres屬性獲取倉庫資料，帶回傳值的函式，第一個引數
是state屬性
3.mutations，修改倉庫中的資料的屬性，各個組件可以通過mutations來對資料進行修改，第一個引數是state物件，第二個引數是要設定的值，
. 4.actions，是如何處理資料，處理完的資料一般會通過提交mutations進行對倉庫資料的修改，可以處理異步的資料，函式的引數是store，通過commit方法提交mutations，
actions中使用axios請求引數，需要匯入axios和urlcode
import axios from ‘axios’
import urlcode from ‘urlcode-json’
在組件中使用倉庫中的資料，通過下面這四個函式映射物件中的四個屬性，可以理解為倉庫物件的輔助函式
mapState mapGetyters mapMutations mapActions
通過this.$store獲取倉庫物件；
提交倉庫的actions this.$store.dispatch();
通過提交mutations改變倉庫的資料 this.$store.commit("");
通過物件展開符的寫法映射倉庫資料 ...mapState("倉庫資料1","倉庫資料2")；
也可以映射倉庫物件中的多個gettres
為了使各個組件都可以訪問倉庫物件，需要在根組件的建構式中注冊倉庫物件，
import store from "倉庫物件的檔案路徑"
new Vue({store})
詳情請參考官方檔案：https://vuex.vuejs.org/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179774.html
標籤：JavaScript