前言

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

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

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

安裝使用

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

npm install vuex --save // yarn add vuex

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

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

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

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

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

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

模塊化管理

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

修改我們的store文件下的目錄結(jié)構(gòu)新建一個(gè)modules目錄以及在此目錄下新建一個(gè)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òng)化導(dǎo)入我們建立的module

然后在我們?cè)诘慕M件的頁(yè)面使用跟之前的基本都是一模一樣的就是通過使用mapState進(jìn)行修改一些獲取state的值因?yàn)槲覀兪峭ㄟ^模塊導(dǎo)入的現(xiàn)在要獲取store中main下的count所以修改后的mapState引入使用如下

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

vuex狀態(tài)持久化

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

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

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

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

總結(jié)

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

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

最新評(píng)論