1. 程式人生 > 實用技巧 >Vue-Vuex狀態管理(一)

Vue-Vuex狀態管理(一)

Vuex(https://vuex.vuejs.org/zh/)是一個專門為vue.js應用程式開發的狀態管理模式,採用集中式儲存管理應用的所有元件的狀態,並以相應的規則保證以一種可預測的方式發生改變。

當應用遇到多元件共享狀態時,很容易出現多個檢視依賴同一狀態、來自不同檢視的行為需要變更同一狀態等問題,對於此類問題,vuex很好地對其進行了解決,通過定義和隔離狀態管理中的各種概念並通過強制規則維持檢視和狀態間餓獨立性,使得程式碼更結構化且易維護。

vuex適用於大型單頁應用,如果是小型應用,加入vuex可能會導致適用更加繁瑣冗餘。

Vuex就猶如網路上的交換機,對各種元件(電腦)進行管理,並且可以配置規則讓元件根據規則進行變化。

官方除錯工具:devtools extension (https://github.com/vuejs/vue-devtools)

安裝:

直接下載:
    https://unpkg.com/vuex         (最新版)
    https://unpkg.com/[email protected]       (指定版本)
在vue中引入:
    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vuex.js"></scirpt>
npm:
    npm install vuex --save
yarn:
    yarn add vuex
在模組化打包系統(除了全域性scirpt標籤引入)中,必須使用Vue.use()來安裝: import Vue
from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

promise(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises)

由於vuex依賴promise,當瀏覽器不支援promise時,可以使用polyfill的庫,官方文件中使用es6-promise(https://github.com/stefanpenner/es6-promise)來進行示例

es6-promise安裝
    cdn引入:
        <script src="https://cdn.jsdelivr.net/npm/es6-pormise@4/dist/es6-promise.auto.js"></script>
    npm:
        npm install es6-promise --save
    yarn:
        yarn add es6-promise
    使用import匯入到使用vuex的地方:
        import 'es6-promise/auto'