前言:如果说我们的vuex的仓库代码量巨大,我们要不要采用就像后端与一样的分层,要不然一吨的代码放在main里,呵呵。所以我们要采用模块化!

看这篇文章的时候,一定要看看上一篇的vuex入门精讲:Vuex的基本概念、项目搭建、入坑点

其中我们的store.js被我们封装成了这样子:

import API from '../../utils/api';
var api = new API('goods'); const state = {
products: []
}
const mutations={
}
const actions={
}
const getters={
}
export default{
state,mutations,actions,getters
}  

Store.js

import Vue from 'vue'
import Vuex from 'vuex'
import User from './mudules/user'
import Product from './mudules/product' Vue.use(Vuex); //仓库
const store = new Vuex.Store({
modules:{
User,Product
}
})
export default store;

 这样我们的仓库就不在像汽车站一样了。

其中需要注意的是;在获取store仓库里的state中,我们需要

return this.$store.state.User.user;这种方式。也就说我们import的哪个对象。就是我们的唯一标识。

Vuex的模块化、优点的更多相关文章

  1. 074——VUE中vuex之模块化modules开发实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vuex的模块化使用

    store文件如下 1.modules下文件是模块化的划分,里面的js有state,action,mutations.然后通过 export default { namespaced: true, s ...

  3. Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)

    在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...

  4. vuex数据管理-数据模块化

    对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...

  5. 一道面试题 vuex缺点?

    最近去面试的时候,面试官有一道题是让我阐述用vuex的优缺点,优点倒还好说,这个缺点还真没有认识到,有道友可以帮忙解惑嘛? 2 回答 慕标5265247 这种问题一般都有通用回答套路.一件挺好的东西, ...

  6. 前端MVC Vue2学习总结(九)——Vuex状态管理插件

    一.概要 1.1.Vuex定义与注意事项 Vuex是为vue.js框架更好的管理状态而设计一个插件.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的 ...

  7. Vuex的一个易错点

    好长时间不用Vuex,发现有些东西记模糊了. 在对Vuex进行模块化开发的时候, const store = new Vuex.Store({ modules: { a: moduleA, b: mo ...

  8. vuex的实现

    源代码可以查看我的github:  https://github.com/Jasonwang911/TryHardEveryDay/tree/master/Vuex/vuex-resouce  欢迎s ...

  9. 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.

    错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...

随机推荐

  1. python第二十二天(面向对象)

    1.面向过程编程: 核心就是过程两个字,过程是指解决问题的步骤,即先干什么后做什么. 基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 优点:复杂的问题流程化.进而简单化 缺点:可扩展 ...

  2. UOJ#73. 【WC2015】未来程序 提交答案题

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ73.html 前言 纯属理性愉悦. 题解 Subtask1 发现就是求 $a \times b \mod c $ . 写个 ...

  3. 升级android studio 3.4需要注意n事项

    1.在AS版本升级前建议关闭AS代理,以及关闭本地的一些代理工具,不然点击更新的时候会提示Connection failed (Read timed out). Please check networ ...

  4. 利用jquery-barcode.js实现生成条形码

    jquery-barcode官网 js下载地址-github 代码示范(官网上也有) <!DOCTYPE html> <html> <head> <meta ...

  5. String.matches()的用法

    https://blog.csdn.net/victoryckl/article/details/6930409

  6. 异步使用委托delegate --- BeginInvoke和EndInvoke方法

    当我们定义一个委托的时候,一般语言运行时会自动帮委托定义BeginInvoke 和 EndInvoke两个方法,这两个方法的作用是可以异步调用委托. 方法BeginInvoke有两个参数: Async ...

  7. C# 异步编程之 Task 的使用

    (说明:随笔内容为学习task的笔记,资料来源:https://docs.microsoft.com/en-us/dotnet/api/system.threading.tasks.task?redi ...

  8. 201771010126 王燕《面向对象程序设计(Java)》第十七周学习总结

    实验十七  线程同步控制 实验时间 2018-12-10 1.实验目的与要求 (1) 掌握线程同步的概念及实现技术:  多线程并发运行不确定性问题解决方案: 多线程并发运行不确定性问题解决方案: 多 ...

  9. Web开发者の实用代码账簿

    介里就都是恶魔菌整理的我平时会用的代码啦-现在在这里总结规划一下,希望能对你以及其他阅读这篇文章的小可耐们有帮助喵!欢迎订阅我的博客来get恶魔菌记事簿的新动态鸭! ↓ ↓ ↓ 以下就是内容啦~记得看 ...

  10. vue项目使用webpack构建的本地服务环境,在手机上访问调试

    使用vue脚手架构建的项目,一般在本地localhost运行,配合浏览器的模拟调试工具开发. 如果想看真机环境,又不想build到线上. webpack能配置电脑本地内网环境指向公网访问的! 1.打开 ...