Vuex之module使用方法及场景说明

 更新时间:2023年10月26日 09:10:14   作者:绿足  
这篇文章主要介绍了Vuex之module使用方法及场景说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、module 使用场景

在项目开发过程中,随着项目逐渐增大,数据关联复杂度逐渐加大, 多人协同开发,人员变动等。

我们会遇到vuex数据更新时,执行某个action 导致同名/未预测到的关联数据发生了变化。 

vue 基本思想之一便是数据驱动, vuex 更是专门的数据状态关联库。

导致数据错误结果可想而知......

使用vuex module 命名空间概念则可以很好的解决这个问题!!!

二、实例演练

先贴个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 = {
  // 当namespaced=true 时, vuex, 将会自动给各自module 添加访问路径名。 方便区分moduel
  namespaced: true,
  state:{
    name: 'moduleB',
    type: 'module B'
  },
  mutations: {
    updateNameByMutation(state, appendStr){
      state.name = state.name + " append Str: " + appendStr
    }
  },
  actions: {
    // 如果不使用命名空间, 那么view 指向actions 的该方法时,会执行所有与指定action名相同的函数(即:这里module A,B 中该action都会执行)
    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]) 使用并区分需要使用的module
    test1,
    test2
   }
})
 
export default storeInstall

store.js 几个简单的vuex 使用场景模拟。 我们有多个模块,分别为: test1, test2...   。 

我们发现开发中可能会存在相同的stateName/ actionName/ mutaionName /。  (实际开发中,getterName 如果有重名编译会提示 getter 重名....)

我们使用vuex 需要实例化一个Vuex的Store构造函数。 这里storeInstall 中第一个state, 我们可以理解为根 state, 它全局可访问。 modules 中则是我们自定义注册的module. 每个module 中都有自己独立的state, action, mutation, getter...  

需要注意的是,这里通过给每个module 对象添加namespaced: true, 来达到命名空间来区分Module的效果。也是通过它来区分更新/调用 对应的vuex 方法来隔离未知数据更新等数据相关问题。

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>
 

这个test1.vue (还有另外一个对应的test2.vue 代码基本一样,主要用来区别两个页面vuex的更新效果), 则向我们展示了如何使用vuex 提供的api 来做数据更新(这里介绍的是引入命名空间的module 场景)。       

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

(2)  在module场景下引入mapActions 我们发现,第一个参数传的是 module 路径(就引入各个module的名称)名。 这种方式将只会在当前view中,导出指定模块下注册的 action 集合。         

(3)  当调用指定定module下的action 执行state 更新操作时, vuex 通过该module名找到对一定的action 进行下一步mutation 操作。 同时受到影响state的也只会时该命名空间下的state 

三、Vuex module namespaced

我们来讨论下module 设置了namespaced 与不设置vuex store 中的module数据有何区别?

打字累截个图吧,一目了然:

图1: 没有设置namespaced=true 

 

图2: 设置namespaced=true 

 

总结

关于vuex module 这里只是个基本讲解。

总结下来就是module  给了我们一种隔离vuex store 各个 state及相关api 的方法,让数据相关操作在复杂的项目场景可以更清晰,易追踪。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue router-link传参以及参数的使用实例

    vue router-link传参以及参数的使用实例

    下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vant之关于van-list的使用以及一些坑的解决方案

    vant之关于van-list的使用以及一些坑的解决方案

    这篇文章主要介绍了vant之关于van-list的使用以及一些坑的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 带你一步步从零搭建一个Vue项目

    带你一步步从零搭建一个Vue项目

    Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • axios请求二次封装之避免重复发送请求

    axios请求二次封装之避免重复发送请求

    在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以在工程开始的来封装一下axios,下面这篇文章主要给大家介绍了关于axios请求二次封装之避免重复发送请求的相关资料,需要的朋友可以参考下
    2022-10-10
  • 在vue中使用inheritAttrs实现组件的扩展性介绍

    在vue中使用inheritAttrs实现组件的扩展性介绍

    这篇文章主要介绍了在vue中使用inheritAttrs实现组件的扩展性介绍,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue2.x 通过后端接口代理,获取qq音乐api的数据示例

    vue2.x 通过后端接口代理,获取qq音乐api的数据示例

    今天小编就为大家分享一篇vue2.x 通过后端接口代理,获取qq音乐api的数据示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 解决VUE双向绑定失效的问题

    解决VUE双向绑定失效的问题

    今天小编就为大家分享一篇解决VUE双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 一文了解Vue 3 的 generate 是这样生成 render 函数的

    一文了解Vue 3 的 generate 是这样生成 render&n

    本文介绍generate阶段是如何根据javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 在Vue 中使用Typescript的示例代码

    在Vue 中使用Typescript的示例代码

    这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue-Router基础学习笔记(小结)

    Vue-Router基础学习笔记(小结)

    这篇文章主要介绍了Vue-Router基础学习笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论