您现在的位置是:首页 > 正文

vuex 模块化

2024-04-01 06:55:08阅读 0

vuex 模块化

一般当项目比较大时,如果vuex 的modules模块过多,此时需要用到模块化来管理仓库。如图是仓库相关文件
在这里插入图片描述

如果在index里引入modules中所有的文件,需在index.js中配置以下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext 
//webpack中的方法
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

比如在addController.js中定义一个变量

const state = {
    compatible: null
}
const mutations = {
      CONTROLLER_COMPATIBLE: (state, data) => {
    state.compatible = data
  }
}
const actions = { // 赋值函数
      saveCompatible({ commit }, data) {
    commit('CONTROLLER_COMPATIBLE', data)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在getters.js中获取该属性

const getters = { // 全局用到相关参数对象
    compatible: state => state.addController.compatible,
}
export default getters

页面中存state属性

//对应modules下addController的路径下saveCompatible方法
 this.$store.dispatch('addController/saveCompatible',false)

页面中通过getter取state属性

this.$store.getters.compatible

网站文章

  • tar打包命令(linux)

    1.打包命令: tar -cvf 归档路径 被打包文件路径。 (c--create archive v-verbose f --file ,f指归档路径,故f必须放在其他选项之后,而且-可省略不写) ...

    2024-04-01 06:55:02
  • 零基础怎么入门人工智能?

    零基础怎么入门人工智能?

    免费分享一些我整理的人工智能学习资料给大家,整理了很久,非常全面。包括一些人工智能基础入门视频+AI常用框架实战视频、图像识别、OpenCV、NLQ、YOLO、机器学习、pytorch、计算机视觉、深...

    2024-04-01 06:54:56
  • git的分支管理策略

    分支在实际中的作用假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交,又存在丢失每天进度的巨大风险。现在有了分支,就不用怕了。你创建了一个属于你自己的分支,别人看不到,还继续在原来的分支上正常工作,而你在自己的分支上干活,想提交就提交,直到开发完毕后,再一次性合并到原来的

    2024-04-01 06:54:50
  • Python快速上手学习笔记

    该笔记适用于想快速的上手Python,用于临时开发工作的同志们o(* ̄▽ ̄*)ブ。

    2024-04-01 06:54:09
  • 几种给对象属性赋值复制操作

    几种给对象属性赋值复制操作 效率:因为Orika的设计思路是预先通过javaassist把JavaBean之间的映射关系一次性生成目标拷贝方法代码。 这样就可以避免在Bean 映射环节一次次的读取映射规则。 从而实现效率上的提高...

    2024-04-01 06:54:02
  • 【NI-DAQmx入门】NI-DAQmx之C、C++、VB、VB.net与C#支持

    net路径(不需要安装Measurement Studio, .NET API 是NI-DAQmx驱动程序的一部分,measurement Studio只是一个集成代码工具)示例:Users\Publ...

    2024-04-01 06:53:53
  • Python语言生成环形队列

    在这个代码中,我们使用了一个类 CircularQueue 来表示环形队列。构造函数 __init__ 接受一个 capacity 参数,表示队列的容量。

    2024-04-01 06:53:15
  • React Hooks 学习笔记

    React Hooks Hooks 1. React Hooks 介绍 1.1 React Hooks 是用来做什么的 对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发...

    2024-04-01 06:53:07
  • 查询Linux下文件格式.

    备忘file 命令可以查一个文件的格式readelf -h 可执行文件名. 可以查询可执行文件的详细的格式 向Windows中exeinfo 软件类转载于:https://www.cnblogs.com/lovesKey/p/11257144.html...

    2024-04-01 06:53:00
  • shell中echo命令详解

    linux的echo命令, 在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的, 因此有必要了解下echo的用法。

    2024-04-01 06:52:18