技術標籤：Vue知識庫vue封裝vuexstate前端

大家好，都吃晚飯了嗎？我是Kaiqisan,是一個已經走出社恐的一般生徒,當我們的專案漸漸大起來的時候，我們存放在vuex裡面的資料也會漸漸變多,尤其在一些視覺化操作頁面專案中，用到的全域性屬性是爆炸多，這個時候，vuex中的資料太過，呼叫和編寫都會變得非常麻煩，我們該如何分配資源呢？

這個時候單個vuex檔案已經無法支援目前的專案了，需要建立多個檔案,步驟如下

• 把所有的state檔案都存放到modules中
  
• 然後開始編寫vuex入口檔案 index.js

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

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => { 
	// modulesFiles.keys()獲取所有js檔案的相對路徑
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1') 
    // 對檔案路徑進行處理，獲取檔名 比如 './app.js' => 'app'
 

    const value = modulesFiles(modulePath) 
    // 獲取一個js檔案(state)下的所有資訊,這一步相當於 -- import 路徑
    modules[moduleName] = value.default 
    // 整合到一個物件modules中
    return modules
    // 開始下一個迭代，直到所有檔案被瀏覽
}, {})

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

export default store

上面程式碼的核心是利用require.context

原先的state， 檔案是單一的檔案

/* 原先的state */
const state = {
	name: 'kaiqi'
	uid: 10001
}

... //這裡不多贅述

現在的state， 有多個檔案 user.js app.js

/* 現在的app.js */
const state = {
	isOpen: true
}

const mutations = {
	....
}

const actions = {
	...
}

export default {
    namespaced: true, 
    // namespaced: true 的方式使其成為帶名稱空間的模組。保證在變數名一樣的時候，新增一個父級名拼接。
    // 例： SET_NAME => user/SET_NAME
    state,
    mutations,
    actions
}

• 修改getter.js

/* 原先的 */
const getters = {
	name: state => state.name,
	uid: state => state.uid
}

/* 現在的 */
const getters = {
	name: state => state.user.name,
	uid: state => state.user.uid
}

畢竟getter要跟隨state的步伐（記得不要重名，如果在不同的檔案出現一樣的引數名的話在getter這裡的命名一定要不一樣，要區分出來，否則出大問題）

• 投入使用
  （前排提示 使用mapGetter匯入的方法還是一樣的）

呼叫引數

在vue檔案中直接使用 this.$state.state.[檔名].[引數名]
比如

this.$store.state.user.name

在js檔案中需要匯入vuex入口檔案index.js

這裡直接舉例

import store from '@/store'

....

console.log(store.state.user.name)

呼叫方法

// 老
this.$store.commit('SET_NAME', val)

// 新
this.$store.commit('user/SET_NAME', val)

這對非同步方法dispatch， getter的呼叫也同理

總結

不要為難自己，該封裝的就要封裝，麻煩是一時的，爽是一直的！