首页 > 其他分享 >vuex分了多个模块,利用语法糖调用不同模块里的方法

vuex分了多个模块,利用语法糖调用不同模块里的方法

时间:2024-04-08 18:46:50浏览次数:14  
标签:... modules 语法 state export 模块 vuex store

// store/modules/a.js
export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}
 
// store/modules/b.js
export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}
 
// store/index.js
import Vuex from 'vuex';
import A from './modules/a';
import B from './modules/b';
 
const store = new Vuex.Store({
  modules: {
    a: A,
    b: B
  }
});
 
export default store;

  

//vue页面
<script> import { mapState, mapMutations, mapActions } from 'vuex'; export default { computed: { // 使用mapState生成计算属性 ...mapState({ countA: state => state.a.count, // 从a模块获取状态 countB: state => state.b.count, // 从b模块获取状态 }), }, methods: {
    //使用mapMutations生成方法(只用到了一个方法,多个方法可参考mapActions的写法)
    ...mapMutations('a', {
      update: 'updateValue' // 假设模块a中的mutation名为updateValue
    }), // 使用mapActions生成方法 ...mapActions({ incrementA: 'a/increment', // 从a模块调用action incrementB: 'b/increment', // 从b模块调用action }),
   someMethod(){
    this.update(newValue); // 调用模块a中的mutation
   }
  },
};
</script>

  

标签:...,modules,语法,state,export,模块,vuex,store
From: https://www.cnblogs.com/jolin-qin/p/18122282

相关文章

  • 如何在vue工程中模块化使用大量的svg图片
    如果你在执行 requireAll(requireSvg) 后得到的是一个 BrowserSpriteSymbol 数组,并且能够直接使用 <use> 进行引用,这通常意味着在构建过程中有一些特定的Webpack配置和/或自定义加载器(loader)被用来处理SVG文件,并将它们转换为一个SVGSprite,其中每个SVG都转换为了一个......
  • Android 编译模块
    https://blog.csdn.net/weixin_40557160/article/details/1304816131.整编sourcebuild/envbuild.shlunchxxxmake2.单独编译模块(最好先整编一次)2.1去Android.bp中找模块名比如我想编译system/core/fastboot,那么我就去找这个路径下的Android.bp/Android.mkAndroid.bp中......
  • BOSHIDA DC电源模块的调试和故障排除技巧
    BOSHIDADC电源模块的调试和故障排除技巧下面是DC电源模块调试和故障排除的一些技巧: 1.确保输入电源稳定:首先要确保输入电源的稳定性,使用稳压器、滤波器等装置来保持输入电压的稳定。2.检查输出电压:使用万用表或示波器检查输出电压是否达到预期值。如果输出电压不正常,可能......
  • python进阶之tkinter模块
    tkinter 是Python的标准图形用户界面(GUI)工具包,用于创建桌面应用程序的用户界面。tkinter 提供了一组丰富的组件和工具,使开发者能够轻松地构建具有按钮、标签、文本框、滚动条等元素的交互式应用程序。以下是 tkinter 模块的一些主要作用:创建窗口:tkinter 提供了创建窗口......
  • destoon复制新模块的方法
    在destoon的实际使用过程中我们往往需要根据情况建立一些系统没有的模块,这时候就需要复制已有的模块来根据已有模块建立新的模块,具体操作方法如下:首先选择一个我们需要的模块(因为系统默认文章和信息模块是可以复制的,在这里我们只研究非默认的模块怎么复制),我选择的是模块名称是品......
  • 震撼!这个Python模块竟然能自动修复代码!
    说到Python的强大的地方,那真的是太多了,优雅、简洁、丰富且强大的第三方库、开发速度快,社区活跃度高等,所以才使得Python才会如此的受欢迎。今天给大家介绍一个特别暴力的Python库:FuckIt,1、FuckIt介绍FuckIt是一个Python实用工具,用于解决由于Python代码出错而导致的运行异常或......
  • Swoole 源码分析之 Timer 定时器模块
    原文首发链接:Swoole源码分析之Timer定时器模块大家好,我是码农先森。引言Swoole中的毫秒精度的定时器。底层基于epoll_wait和setitimer实现,数据结构使用最小堆,可支持添加大量定时器。在同步IO进程中使用setitimer和信号实现,如Manager和TaskWorker进程,在异步IO......
  • JS模块化——AMD、CommonJS和ESModules
    文章目录JS模块化——AMD、CommonJS和ESModules方法介绍传统方法:立即执行函数:异步模块定义AMD:CommonJS:ESModules:CommonJS和ESModules区别JS模块化——AMD、CommonJS和ESModules前端模块化是指将前端代码拆解成互相独立的小块,每一块完成特定的功能,这些小块被......
  • 前端【VUE】06-vue【组件组成】【组件通信】【进阶语法】
    一、组件的三大组成部分(结构/样式/逻辑)组件的三大组成部分组件的样式冲突scoped1、components目录下components/BaseOne.vue1<template>2<divclass="base-one">3BaseOne4</div>5</template>67<script>8exportdefault{9......
  • 【编译原理】手工打造语法分析器
    重点:语法分析的原理递归下降算法(RecursiveDescentParsing)上下文无关文法(Context-freeGrammar,CFG)关键点:左递归问题深度遍历求值-后续遍历上一篇「词法分析器」将字符串拆分为了一个一个的token。本篇我们将token变成语法树。一、递归下降算法还是这个例子in......