Vue学习笔记-模块化+命名空间

目的

让代码更好维护,让多种数据分类更加明确(不同的模块挤在一个index.js中显得臃肿且不方便管理)

实现方式

  1. 修改store/index.js(也可以将不同模块分别写在不同的js文件中)

    javascript 复制代码
    const countAbout = {
    	//开启命名空间
        namespaced:true,
        actions:{
        	......
        },
        mutations:{
            ......
        },
        state:{
            sum:0,
        },
        getters:{
            bigSum(state){
                return state.sum*10
            }
        }
    }
    
    const personAbout = {
    	namespace = true,//开启命名空间
    	state = {
    		list:[xxx]
    	},
    	mutations = {...},
    	actions = {...}
    }
    
    const store = new Vuex.Store({
    	modules:{
    		countAbout,
    		personAbout
    	}
    })
  2. 开启命名空间后,组件读取各个模块的state数据

    javascript 复制代码
    //方式一:直接读取
    this.$store.state.countAbout.sum
    //方式二:借助mapState读取
    ...mapState('countAbout',['sum',...])
  3. 组件读取各个模块的getters数据

    javascript 复制代码
    //方式一:直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取
    ...mapGetters('personAbout',['firstPersonName'])
  4. 组件调用dispatch

    javascript 复制代码
    //方式一:直接调用
    this.$store.dispatch('personAbout/addPerson',value)
    //方式二:借助mapActions
    ...mapActions('personAbout',{addPerson:'addPerson'})
  5. 组件调用commit

    javascript 复制代码
    //方法一:直接调用
    this.$store.commit('personAbout/ADD_PERSON',value)
    //方式二:借助mapMutations
    ...mapMutations('personAbout',{ADD_PERSON:'ADD_PERSON'})

注意:mapActions和mapMutation中无法填写函数参数,需要在html组件的@click方法声明中自己填写

相关推荐
Dann Hiroaki1 小时前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan2 小时前
Unity-MMORPG内容笔记-其三
笔记
九年义务漏网鲨鱼2 小时前
【大模型学习 | MINIGPT-4原理】
人工智能·深度学习·学习·语言模型·多模态
jz_ddk2 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
kfepiza3 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian
Hexene...3 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
爱莉希雅&&&3 小时前
技术面试题,HR面试题
开发语言·学习·面试
Chef_Chen5 小时前
从0开始学习计算机视觉--Day08--卷积神经网络
学习·计算机视觉·cnn