前言

    在vue開發(fā)用我們常常會用到一些全局的數(shù)據(jù)，比如用戶信息、用戶權(quán)限、一些狀態(tài)等等。我們傳統(tǒng)的數(shù)據(jù)都是單向的，所以我們得一層一層的傳遞，這樣我們遇到一個多組件共享一個數(shù)據(jù)的時候，單向的這個數(shù)據(jù)就很難以維護(hù)，比如一個組件嵌套很多層但是，數(shù)據(jù)改變方法就得一層一層的傳遞。這時候我們就可以引入了vuex。

    vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

如下圖就是vuex官網(wǎng)中管理組件間一個共享狀態(tài)的流程圖

安裝使用

我們之間在我們初始化的vue-cli的項目中之間使用npm或者yarn進(jìn)行一個安裝就可以了.

npm install vuex --save // yarn add vuex

然后我們進(jìn)行管理我們的狀態(tài)，在根目錄下src文件中新建一個store文件夾然后在store下建立index.js作為入口文件，然后寫入我們的一個全局狀態(tài)。

這里的state作為全局的狀態(tài)，getters是可以作為我們派生出來的一些狀態(tài)，例如需要對state中count進(jìn)行相除操作，然后mutations就是改變state的狀態(tài)的方法第一個參數(shù)是我們的state的Object然后第二個參數(shù)是可以我傳入的值。最后這里的actions是提交mutation的而不是直接變更狀態(tài)這里的action是可以是異步函數(shù)。action中的函數(shù)第一個參數(shù)接收一個與store實例先溝通呢的方法和屬性的context函數(shù)， 第二個可是我們傳入的。

在頁面中使用state以及通過getter派生出來的state和通過action派發(fā)更改state數(shù)據(jù)

這里我通過vuex中mapState、mapGetters、mapMutations、mapActions的方式引入想對應(yīng)state、getter派生數(shù)據(jù)，mutation、action，然后我就直接可以再vue實例上使用了。當(dāng)然也可以直接引入我們定義的store通過store實例上的獲取我們想要的state、action、mutation。
效果如下所示

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

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

模塊化管理

當(dāng)我們的state變的多了，store對象可能就會變得非常的臃腫，所以我就需要使用模塊化管理的方式進(jìn)行對我們的state文件分文件處理，這樣更有利于我們的維護(hù)。

修改我們的store文件下的目錄結(jié)構(gòu)新建一個modules目錄以及在此目錄下新建一個main.js。

修改后的目錄如圖所,getters.js是我們派生的一些狀態(tài)。

然后修改我們的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 moduleStores = {}

context.keys().forEach(key => {
    // 獲取讀取到的文件名字并且截取
    const fileName = key.slice(2, -3);

    //通過 context(key)導(dǎo)出文件內(nèi)容
    const fileModule = context(key).default

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

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

export default store

這里我們使用webpack的api自動化導(dǎo)入我們建立的module

然后在我們在的組件的頁面使用跟之前的基本都是一模一樣的就是通過使用mapState進(jìn)行修改一些獲取state的值因為我們是通過模塊導(dǎo)入的現(xiàn)在要獲取store中main下的count所以修改后的mapState引入使用如下

現(xiàn)在這樣我們已經(jīng)使用了模塊化的管理方式，比如想新建立一個state庫我們就只需在modules下建立就可以了，文件的格式都是如main.js形式導(dǎo)出。

vuex狀態(tài)持久化

當(dāng)我們使用vuex做為狀態(tài)管理的時候，我們刷新瀏覽器然后vuex數(shù)據(jù)就沒有了，這時候我們就需要一個數(shù)據(jù)持久化的操作，比如講我們的數(shù)據(jù)保存在localstroage中， 這是可以實現(xiàn)的。但是如果我們store模塊多的時候，可能這樣就比較麻煩，所以引入了vuex-persistedstate這個第三方的插件庫。

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

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

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

總結(jié)

在此我只簡單的介紹使用了vuex使用，更具體的使用官網(wǎng)可以參考官網(wǎng)。vuex確實是方便我們管理一些全局狀態(tài)了，比如用戶信息，動態(tài)加載路由時候存儲的路由。當(dāng)是小項目使用的時候可能增加我們的復(fù)雜度，所以在考慮項目前期的時候盡量的規(guī)劃好我們的項目目錄結(jié)構(gòu)以及數(shù)據(jù)結(jié)構(gòu)形式，這對我們快速開發(fā)和維護(hù)一個項目是很重要的。

到此這篇關(guān)于vue-cli配置使用Vuex的文章就介紹到這了,更多相關(guān)vue-cli配置使用Vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論