vue-cli配置使用Vuex的全過(guò)程記錄

目錄

前言

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

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

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

安裝使用

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

npm install vuex --save // yarn add vuex

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

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

在頁(yè)面中使用state以及通過(guò)getter派生出來(lái)的state和通過(guò)action派發(fā)更改state數據

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

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

vuex官方文檔: …

模塊化管理

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

修改我們的store文件下的目錄結構新建一個(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);

    //通過(guò) context(key)導出文件內容
    const fileModule = context(key).default

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

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

export default store

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

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

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

vuex狀態(tài)持久化

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

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

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

vuex-persistedstate的Github地址: …

總結

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

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