詳解Vuex下Store的模塊化拆分實踐

更新時間：2019年07月31日 09:52:44 作者：貓切

這篇文章主要介紹了詳解Vuex下Store的模塊化拆分實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

最近的項目用到了 vue.js + vuex + vue-router 全家桶，版本為 >2.0，在搞Store的時候發(fā)現，圈子里大部分關于vuex的文章都是比較基礎的Demo搭建方式，很少有涉及到比較復雜的模塊化拆分的Store實踐，而且事實上也有朋友在實踐中問到過這方面的內容，vuex自身提供了模塊化的方式，因此在這里總結一下我自己在項目里的心得。

模塊化拆分

vue.js的項目文件結構在這里就不說了，大家可以通過vue-cli初始化項目,腳手架會為你搭建一個start項目的最佳實踐。

默認你已經搭架好了一個項目，而且需要建立或者已經是一個復雜的Store，但是還沒有進行模塊拆分，你可以嘗試對其進行模塊拆分，當然在一開始你不必一定需要這么做。

1. 安裝Vuex，建立文件結構

在項目根目錄下安裝vuex:

npm install vuex -S

安裝完畢后，在項目的src文件夾下新建一個store文件夾，并且分別在其中新建modules,actions,mutations,getters,constants子文件夾和一個index.js文件。

目錄結構如下：

└─ demo/
  ├── build/
  ├── config/
  ├── node_modules/
  ├── src/
  │  ├── assets/
  │  ├── components/
  │  ├── store/
  │  │  ├── actions/ 
  │  │  │  ├──aAction.js
  │  │  │  ├──bAction.js
  │  │  │  └──cAction.js
  │  │  ├── constants/
  │  │  │  └── types.js
  │  │  ├── getters/
  │  │  │  └── aGetter.js
  │  │  ├── modules/
  │  │  │  ├── aModules.js
  │  │  │  ├── bModules.js
  │  │  │  ├── cModules.js
  │  │  │  └── index.js
  │  │  ├── mutations/
  │  │  │  ├── aMutation.js
  │  │  │  ├── bMutation.js
  │  │  │  └── cMutation.js
  │  │  └── index.js
  │  ├── App.vue
  │  └── main.js
  ├── static/
  ├── utils/
  ├── test/
  └── index.html

好了，基本的文件結構大概就是上面?這樣的。

2. 編寫模塊A

在編寫模塊之前，首先設定一些type類，例如：

types.js

module.exports = keyMirror({

  FETCH_LIST_REQUEST: null,
  FETCH_LIST_SUCCESS: null,
  FETCH_LISR_FAILURE: null
  
})

function keyMirror (obj) {
 if (obj instanceof Object) {
  var _obj = Object.assign({}, obj)
  var _keyArray = Object.keys(obj)
  _keyArray.forEach(key => _obj[key] = key)
  return _obj
 }
}

上面自己實現keyMirror的方法，大家也可以使用下面這個包：

https://github.com/STRML/keyMirror

keyMirror的作用就是下面這個一個形式?，作用其實也不是很大：

Input: {key1: null, key2: null}

Output: {key1: key1, key2: key2}

actions/aAction.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'
import { toQueryString } from '../../utils'
import axios from 'axios'

export const fetchListAction = {
  fetchList ({ commit, state }, param) {
    commit(FETCH_LIST_REQUEST)
    axios.get('http://youdomain.com/list')
     .then(function (response) {
      commit(FETCH_LIST_SUCCESS, {
        data: response.data
      }) 
      console.log(response);
     })
     .catch(function (error) {
      commit(FETCH_LIST_FAILURE, {
        error: error
      })
      console.log(error);
     });
  }
}

getters/aGetter.js

export const = fetchListGetter = {
  hotList (state) {
    return state.list.data.slice(0, 10)
  }
}

mutations/aMutation.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'

export const fetchListMutation = {
  [FETCH_LIST_REQUEST] (state) {
    state.isFetching = true
  },
  [FETCH_LIST_SUCCESS] (state, action) {
    state.isFetching = false
    state.data = action.data
    state.lastUpdated = (new Date()).getTime()
  },
  [FETCH_LIST_FAILURE] (state, action) {
    state.isFetching = false
    state.error = action.error
  }
}

modules/aModule.js

import { fetchListAction } from '../actions/aAction'
import { fetchListGetter } from '../getters/aGetter'
import { fetchListMutation } from '../mutations/aMutation'

export const list = {
  state: {
    isFetching: false,
    data: []
  }
  actions: fetchListAction,
  getters: fetchListGetter,
  mutations: fetchListMutation
}

modules/index.js

import { list } from './aModule'

module.exports = {
  list: list
}

3. 掛載store

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import { list } from './modules'

Vue.use(Vuex)

const store = new Vuex.Store({
 modules: {
  list: list
  
 },
 plugins: [createLogger()],
 strict: process.env.NODE_ENV !== 'production'
})

if (module.hot) {
 module.hot.accept(['./mutations'], () => {
  const newMutations = require('./mutations').default

  store.hotUpdate({
   mutations: newMutations
  })
 })
}

export default store

4. store注入vue實例

main.js

 ····
import store from './store'

 ···· 


var vue = new Vue({
 store,
 
 ···· 

})

vue.$mount('#app')

5. 在Component中使用

Vuex 提供了組件中使用的mapState,mapAction,mapGetter方法，因此可以很方便的調用。

Example.vue

<template>

 ·········

</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
module.exports = {
  ·······
  methods: {
    ...mapActions([
      'fetchList'
    ])
  },
  computed: {
    ...mapState{
      list: state => state.list
    },
    ...mapGetters{[
      'hotList'
    ]}
  }
}
</script>
<style>
  ·······
</style>

復用模塊

模塊化拆分之后可以實現較為復雜的數據流，特別地，如果對action和mutation稍加改造，就可以復用模塊：
比如我們在Example.vue中發(fā)起Action：

Example.vue

<template>

 ·········

</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
module.exports = {
  ·······
  mounted () {
    this.fetchList({
      request: 'week'
    })
  },
  methods: {
    ...mapActions([
      'fetchList'
    ])
  },
  computed: {
    ...mapState{
      list: state => state.list
    },
    ...mapGetters{[
      'hotList'
    ]}
  }
}
</script>
<style>
  ·······
</style>

在上面的例子中，我們在組件掛載完成之后發(fā)起了一個fetchList的action，并添加了一個名為request的參數，這里給一個week值，也可以給按照業(yè)務需要給month、year之類的值，接下來對aAction.js做一些修改。

actions/aAction.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'
import { toQueryString } from '../../utils'
import axios from 'axios'

export const fetchListAction = {
  fetchList ({ commit, state }, param) {
    commit(FETCH_LIST_REQUEST, {
      request: param['request']
    })
    axios.get(`http://youdomain.com/${param['request']}list`)
     .then(function (response) {
      commit(FETCH_LIST_SUCCESS, {
        request: param['request']
        data: response.data
      }) 
      console.log(response);
     })
     .catch(function (error) {
      commit(FETCH_LIST_FAILURE, {
        request: param['request']
        error: error
      })
      console.log(error);
     });
  }
}

請求成功之后，在 commit()中加入了一個request的參數，這樣Mutation就可以從里面獲取相應的參數，最后對aMutation做一些修改。

mutations/aMutation.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'

export const fetchListMutation = {
  [FETCH_LIST_REQUEST] (state, action) {
    state[action.request].isFetching = true
  },
  [FETCH_LIST_SUCCESS] (state, action) {
    state[action.request].isFetching = false
    state[action.request].data = action.data
    state[action.request].lastUpdated = (new Date()).getTime()
  },
  [FETCH_LIST_FAILURE] (state, action) {
    state[action.request].isFetching = false
    state[action.request].error = action.error
  }
}

state加入了[action.request]，以區(qū)分不同的接口數據。

完成以上修改后，只需要在組件調用相應的action時加入不同的參數，就可以調用相同類型但數據不同的接口。

總結

以上是我在Vuex實踐中總結的一些東西，分享給大家，如果有不合理或者錯誤❌的地方，也希望各位老司機不吝賜教，有機會多交流。也希望大家多多支持腳本之家。

微信號：pasturn
Github：https://github.com/pasturn

您可能感興趣的文章:

vue打包時不刪除dist里的原有文件配置方法
這篇文章主要為大家介紹了vue打包時不刪除dist里的原有文件配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-11-11
vue3 pinia使用及持久化注冊
本文介紹了Pinia的使用方法及如何實現狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細說明了如何通過Pinia-plugin-persistedstate插件實現Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊
2024-10-10
詳解Vue中使用Axios攔截器
這篇文章主要Vue使用Axios攔截器，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
vue項目中Eslint校驗代碼報錯的解決方案
這篇文章主要介紹了vue項目中Eslint校驗代碼報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue $mount 和 el的區(qū)別說明
這篇文章主要介紹了vue $mount 和 el的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue數據更新視圖未更新的幾種解決方案
本文主要介紹在vue項目中,遇到數據更新但視圖不更新的情況時,無法使用watch監(jiān)聽、無法使用this.$set方法,同時使用this.$forceUpdate()無效時,所使用的解決方案,需要的朋友可以參考下
2024-02-02
VUE頁面中加載外部HTML的示例代碼
本篇文章主要介紹了VUE頁面中加載外部HTML的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue使用window.open()跳轉頁面的代碼案例
這篇文章主要介紹了vue中對window.openner的使用,vue使用window.open()跳轉頁面的代碼案例，本文通過實例代碼給大家詳細講解，需要的朋友可以參考下
2022-11-11
vue 自定義提示框(Toast)組件的實現代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實現代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
vue基礎知識--axios合并請求和slot
這篇文章主要介紹了vue中的axios和slot，文中代碼非常詳細，對大家的工作學習有所幫助，感興趣的朋友可以參考下
2020-06-06