VUE3 全局共用數據方案之三 Vuex企業級模塊化設計(詳細流程)

Vue3,webpack,vite 通用

適用於中大型項目中

1.安裝vuex

npm i vuex

2.創建倉庫與文件結構（核心）

一，創建入口

在src目錄下創建store文件夾，store文件夾下創建 下麵文件結構

 actions.js

import * as type from './mutation-types' // 設置 state倉庫裡面的時候狀態 起到命名規範和防止命名衝突的問題
import apiService from '@/api/signIn' // 請求配置的 api 
// 這個文件主要是添加vuex全局方法 處理非同步請求
export default {
    order_list({ commit, dispatch }, params) {
        apiService['order_list'](params.data).then(res => {
            if (params.callback) {
                params.callback(res)
            }
        })
    },
    // 更新啟動頁面
    SetStartImg({ commit, dispatch },params) {
        commit(type.NAVBAR_BG, params)
    },
}

mutations.js

更新state

import * as type from './mutation-types'
import storage from '@/utils/storage.js'

export default {
    [type.NAVBAR_BG](state, val) {
        // 更新用戶當前定位 儲存本地
        storage.setItem('user-location', val);
        //在更新數據
        state[type.NAVBAR_BG] = val
    },
}

mutation-types.js

解決命名規範和衝突

const NAVBAR_BG = 'navbarBg'

export {
    
    NAVBAR_BG,
}

src/api/signIn.js

這裡主要是 所有請求後端的api封裝  request.js 就是 axios 你們更具自己的業務 就自行封裝了

import request from '@/utils/request'

const apiService = {
   order_list: function(data) {
        return request({ url: 'api/wxMiniAuth/loginByCode', method: 'GET', data,showLoading:true })
    },
}


export default apiService

index.js

函數彙總導入 ，講上面我們創建的文件進行導入

註意:變數 modulesFiles，modules 使用的是vite腳手架框架中的 自動化導入子模塊modules文件

如果你使用的是webpack5創建的Vue3 就打開裡面的另外一個註釋進行使用 

自動化導入的好處是 後期在創建子模塊的時候 不在需要在index.js 文件進行每個單獨的import導入了 

只需要創建 對應的子模塊文件結構和代碼就可以了

import { createStore } from 'vuex'
import actions from './actions'
import mutations from './mutations'


// vite 自動化導入文件函數
const modulesFiles = import.meta.glob('./modules/*/index.js', { eager: true });
const modules = Object.keys(modulesFiles).reduce(
    (modules, path) => {
        const moduleName = path.replace(/^\.\/(.*)\.\w+$/, '$1')
        modules[moduleName.split('/')[1]] = modulesFiles[path]?.default
        return modules
    }, {}
);

// webpack5 自動化導入文件函數
// const modulesFiles = require.context('./modules', true, /index.js$/)
// const modules = modulesFiles.keys().reduce((modules, modulePath) => {
//     const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
//     const value = modulesFiles(modulePath);
//     modules[moduleName.split('/')[0]] = value.default
//     return modules;
// }, {});

const store = createStore({
    modules,
    state: {
        name: 'allen'
    },

    mutations,

    actions,

    getters: {}
})

export default store

二，創建vuex子模塊

每個子模塊都創建一個文件夾 ，註意這個文件夾的名稱最好和你要開發的模塊名稱對應上 因為我們在使用到子模塊的內容和函數的時候 會去用文件夾的名稱作為對象的key去查找調用

 創建登錄子模塊 截圖中的其他3個文件都與上面的創建方式結構相同所以這裡我只說 index.js

import actions from './actions'
import mutations from './mutations'
const state = {
    userData:storage.getItem('userData') || null,
    SigninType:false // 是否登錄
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

一個模塊化的子模塊就創建完畢

比如我使用 vue2按照這種方式定義一個子模塊 文件夾叫 signIn 在頁面上使用actions非同步 和讀取子模塊中的 state的時候就是這樣的

import { mapActions, mapState } from 'vuex'
...mapState('signIn',['logonType']) // 讀取子模塊signIn中定義的 state

...mapActions('signIn', ['setLogin', 'outUserinfo']), // 讀取子模塊中 setLogin非同步

以上是vue2的使用子模塊的方法

在vue3 中使用

import { ref, reactive} from "vue";
import { useStore } from "vuex";
const { dispatch, state } = useStore();
// dispatch('子模塊文件名稱/對應子模塊的非同步函數名稱')
 dispatch("signIn/bindPhone", {
     data: {
         ivStr: e.detail.iv,
         encryptedData: e.detail.encryptedData
     },
     callback(res) {
            // console.log('綁定成功',res)
         dispatch("signIn/getMember");
     }
 });


// state.子模塊文件名稱(state).key
console.log(state.index)

2.main.js註冊

最後全部創建完成後記得不要忘記了 在main.js進行導入註冊

import store from '@/store/index.js'
app.use(store)

最後 整個項目使用vuex模塊化後 所有的請求api 都在actions 並且還可以寫一些公共方法在全局和局部中 進行邏輯調用

並且對登錄流程狀態管理就簡單了，並且在頁面 只需要導入vuex 就可以對模塊與模塊之間的邏輯進行復用 對整個項目的邏輯進行簡單快速的閉環

且易於維護，減少頁面複雜代碼，並且初步框架搭建完成後 後續只需要手動添加子模塊 進行擴展。

最後建議可以對vuex的調用在進行一個簡單的封裝，因為在vue3 使用vuex 需要導入然後解構，不像vue2 只需要導入後使用this 就可以訪問到，當前模塊化設計適用於中大型項目中。