Vuex之module使用方法及場景說明

更新時(shí)間：2023年10月26日 09:10:14 作者：綠足

這篇文章主要介紹了Vuex之module使用方法及場景說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、module 使用場景

在項(xiàng)目開發(fā)過程中，隨著項(xiàng)目逐漸增大，數(shù)據(jù)關(guān)聯(lián)復(fù)雜度逐漸加大，多人協(xié)同開發(fā)，人員變動等。

我們會遇到vuex數(shù)據(jù)更新時(shí)，執(zhí)行某個(gè)action 導(dǎo)致同名/未預(yù)測到的關(guān)聯(lián)數(shù)據(jù)發(fā)生了變化。

vue 基本思想之一便是數(shù)據(jù)驅(qū)動， vuex 更是專門的數(shù)據(jù)狀態(tài)關(guān)聯(lián)庫。

導(dǎo)致數(shù)據(jù)錯(cuò)誤結(jié)果可想而知......

使用vuex module 命名空間概念則可以很好的解決這個(gè)問題?。。?/p>

二、實(shí)例演練

先貼個(gè)demo

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
const test1 = {
  namespaced: true,
  state: {
    name: 'moduleA',
    type: 'module A'
  },
  mutations: {
    updateNameByMutation(state, appendStr){
      state.name = state.name + " append Str: " + appendStr
    }
  },
  actions: {
    udpateNameByAction({commit}, appendStr) {
      commit("updateNameByMutation", appendStr)
    }
  },
  getters: {
    getNameA(state){
      return state.name
    }
  }
}
const test2 = {
  // 當(dāng)namespaced=true 時(shí)， vuex, 將會自動給各自module 添加訪問路徑名。 方便區(qū)分moduel
  namespaced: true,
  state:{
    name: 'moduleB',
    type: 'module B'
  },
  mutations: {
    updateNameByMutation(state, appendStr){
      state.name = state.name + " append Str: " + appendStr
    }
  },
  actions: {
    // 如果不使用命名空間， 那么view 指向actions 的該方法時(shí)，會執(zhí)行所有與指定action名相同的函數(shù)（即：這里module A,B 中該action都會執(zhí)行）
    udpateNameByAction({commit}, appendStr){
      commit("updateNameByMutation", appendStr)
    }
  },
  getters: {
    getNameB(state){
      return state.name
    }
  }
}
 
const storeInstall =  new Vuex.Store({
   state: {
     name: 'i am root state name'
   },
   modules:{
    // 這里的路徑名： test1, test2, 在view 中 通過 mapActions('test1', [actionName]) 使用并區(qū)分需要使用的module
    test1,
    test2
   }
})
 
export default storeInstall

store.js 幾個(gè)簡單的vuex 使用場景模擬。我們有多個(gè)模塊，分別為： test1, test2... 。

我們發(fā)現(xiàn)開發(fā)中可能會存在相同的stateName/ actionName/ mutaionName /。 (實(shí)際開發(fā)中，getterName 如果有重名編譯會提示 getter 重名....)

我們使用vuex 需要實(shí)例化一個(gè)Vuex的Store構(gòu)造函數(shù)。這里storeInstall 中第一個(gè)state, 我們可以理解為根 state, 它全局可訪問。 modules 中則是我們自定義注冊的module. 每個(gè)module 中都有自己獨(dú)立的state, action, mutation, getter...

需要注意的是，這里通過給每個(gè)module 對象添加namespaced: true, 來達(dá)到命名空間來區(qū)分Module的效果。也是通過它來區(qū)分更新/調(diào)用對應(yīng)的vuex 方法來隔離未知數(shù)據(jù)更新等數(shù)據(jù)相關(guān)問題。

Test.vue

<template>
  <div>
    <div>
    <h2>Page Test1</h2>
    </div>
    <div>
    <a href="javascript:" rel="external nofollow"  rel="external nofollow"  @click="changeName">udpate: 名稱Name</a>  &nbsp; &nbsp;
    <a href="javascript:" rel="external nofollow"  rel="external nofollow"  @click="showName">顯示更新后的Name</a> &nbsp; &nbsp;
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data(){
    return {}
  },
  computed: {
    ...mapState('test1', {
      state: state => state
    })
  },
  methods: {
    // test1 模塊路徑名
    ...mapActions('test1', [
      'udpateNameByAction'
    ]),
    changeName(){
      this["udpateNameByAction"]('ha ha test1 udpate !!')
    },
    showName(){
      console.log(this.$store.state)
    },
  },
  mounted() {
    console.log("store name: ", this.$store)
    console.log("namespace test1 state: ", this.state)
  }
}
</script>

這個(gè)test1.vue （還有另外一個(gè)對應(yīng)的test2.vue 代碼基本一樣，主要用來區(qū)別兩個(gè)頁面vuex的更新效果）, 則向我們展示了如何使用vuex 提供的api 來做數(shù)據(jù)更新（這里介紹的是引入命名空間的module 場景）。

(1) 首先通過vuex 引入需要的api 這里主要演示 ...mapActions .

(2) 在module場景下引入mapActions 我們發(fā)現(xiàn)，第一個(gè)參數(shù)傳的是 module 路徑(就引入各個(gè)module的名稱)名。這種方式將只會在當(dāng)前view中，導(dǎo)出指定模塊下注冊的 action 集合。

(3) 當(dāng)調(diào)用指定定module下的action 執(zhí)行state 更新操作時(shí)， vuex 通過該module名找到對一定的action 進(jìn)行下一步mutation 操作。同時(shí)受到影響state的也只會時(shí)該命名空間下的state