目錄

• 前言
  
• 安裝使用
  
• 模組化管理
  
• x狀態持久化
  
• 總結
  

前言

    在vue開發用我們常常會用到一些全域性的資料，比如使用者資訊、使用者許可權、一些狀態等等。我們傳統的資料都是單向的，所以我們得一層一層的傳遞，這樣我們遇到一個多元件共享一個數據的時候，單向的這個資料就很難以維護，比如一個元件巢狀很多層但是，資料改變方法就得一層一層的傳遞。這時候我們就可以引入了vuex。

    vuex 是一個專為 Vue. 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

如下圖就是vuex官網中管理元件間一個http://www.cppcns.com共享狀態的流程圖

安裝使用

我們之間在我們初始化的vue-cli的專案中之間使用npm或者yarn進行一個安裝就可以了.

npm install vuex --save // yarn add vuex

然後我們進行管理我們的狀態，在根目錄下src檔案中新建一個store資料夾然後在store下建立index.js作為入口檔案，然後寫入我們的一個全域性狀態。

這裡的state作為全域性的狀態，getters是可以作為我們派生出來的一些狀態，例如需要對state中count進行相除操作，然後mutations就是改變state的狀態的方法第一個引數是我們的state的Object然後第二個引數是可以我傳入的值。最後這裡的actions是提交mutation的而不是直接變更狀態這裡的action是可以是非同步函式。action中的函式第一個引數接收一個與store例項先溝通呢的方法和屬性的context函式， 第二個可是我們傳入的。

在頁面中使用state以及通過getter派生出來的state和通過action派發更改state資料

這裡我通過vuex中mapState、mapGetters、mapMutations、mapActions的方式引入想對應state、getter派生資料，mutation、action，然後我就直接可以再vue例項上使用了。當然也可以直接引入我們定義的store通過store例項上的獲取我們想要的state、action、mutation。
效果如下所示

個人感覺使用vuex結合map開頭引入的方式比較優雅點，所以我也就使用了這種方式，更多的引用定義方法可以參考vuex官網所給出的示例，我這就是使用了單單我平時使用的一種形式。

vuex官方文件: vuex.vuejs.org/zh/guide/ac…

模組化管理

當我們的state變的多了，store物件可能就會變得非常的臃腫，所以我就需要使用模組化管理的方式進行對我們的state檔案分檔案處理，這樣更有利於我們的維護。

修改我們的store檔案下的目錄結構新建一個modules目錄以及在此目錄下新建一個main.js。

修改後的目錄如圖所,getters.js是我們派生的一些狀態。

然後修改我們的index.js檔案程式碼如下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

const context = require.context('./modules',false,/\.js$/)
const mwww.cppcns.comoduleStores = {}

context.keys().forEach(key => {
    // 獲取讀取到的檔名字並且擷取
    const fileName = key.slice(2,-3);

    //通過 context(key)匯出檔案內容
    const fileModule = context(key).default

    moduleStores[fileName] = {
        ...fileModule
    }
})

const store = new Vuex.Store({
  modules: {
    ...moduleStores,},getters
})

export default store

這裡我們使用webpack的api自動化匯入我們建立的module

然後在我們在的元件的頁面使用跟之前的基本都是一模一樣的就是通過使用mapState進行修改一些獲取state的值因為我們是通過模組匯入的現在要獲取store中main下的count所以修改後的mapState引入使用如下

現在這樣我們已經使用了模組化的管理方式，比如想新建立一個state庫我們就只需在modules下建立就可以了，檔案的格式都是如main.js形式匯出。

vuex狀態持久化

當我們使用vuex做為狀態管理的時候，我們重新整理瀏覽器然後vuex資料就沒有了，這時候我們就需要一個數據持久化的操作，比如講我們的資料儲存在localstroage中， 這是可以實現的。但是如果我們store模組多的時候，可能這樣就比較麻煩，所以引入了vuex-persistedstate這個第三方的外掛庫。

使用方法只需要在我們的store目錄下的index.js中引入並且在new Stroe的時候進行一個使用就可以了 如下

這裡在plugins中使用我們引入的createPersistedState方法就可以了，直接引入的方式是我們所有狀態都是進行一個持久化的操作，當然我們也可以修改配置，放我們想進行持久化的一個狀態進行持久化操作，具體的配置我這裡沒有寫了具體可以參照vuex-persistedstate官方的配置。

vuex-persistedstate的地址: github.com/robinvdvleu…

總結

在此我只簡單的介紹使用了vuex使用，更具體的使用官網可以參考官網。vuex確實是方便我們管理一些全域性狀態了，比如使用者資訊，動態載入路由時候儲存的路由。當是小專案使用的時候可能增加我們的複雜度，所以在考慮專案前期的時候儘量的規劃好我們的專案目錄結構以及資料結構形式，這對我們快速開發和維護一個專案是很重要的。

到此這篇關於vue-cli配置使用Vuex的文章就介紹到這了,更多相關vue-cli配置使用Vuex內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！