前言:如果说我们的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. 浅谈Java语言中try{}catch{}和finally{}的执行顺序问题

    浅谈Java语言中try{}catch{}和finally{}的执行顺序问题 2019-04-06  PM  13:41:46  1. 不管有没有出现异常,finally块中代码都会执行: 2. 当t ...

  2. 详解 IntelliJ IDEA 配置和启动maven 项目 步骤

    1.本地安装maven 1.1 安装 https://www.cnblogs.com/wkrbky/p/6350334.html?utm_source=itdadao&utm_medium=r ...

  3. jquery只获取自身文本节点,不获取子元素的

    jQuery.text()方法时候,会把子元素的文本也获取到,以下方法可获取自身文本节点,不包括子元素 <div id="demo">只获取我<a href=&q ...

  4. 结队第一次 plus

    作业描述 作业所属课程:软件工程1916|W(福州大学) 作业要求:结对第一次-原型设计 结对学号:221600328 221600106 作业目标:尝试结对合作,使用NABCD模型,会分析用户需求, ...

  5. tomcat部署项目启动采坑之UnknownHostException

    在一台新服务器上,把war包部署在tomcat上,很普通的很简单的一个活,但我踩到一个大坑. 需要组件tomcat8,mysql5.7,mosqquito1.5,centos7,war包,把组件都装好 ...

  6. vue - 新建一个项目

    首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...

  7. tyflow车撞墙测试

  8. D. Frets On Fire 前缀和+二分

    这个题真的难了我一天了,这种方法一开始没想出来,后来看了题解后明白了大致思路开始自己做但是!!!但是自己实现的时候老是一些细节出错!!!,调bug调了得有一个小时,蠢死了,这道题我一定要好好总结,总结 ...

  9. Java for Andriod 第二周学习总结

    第四章 学习时遇到的问题或新知识点: 1. 构造方法.每个类至少有一个构造方法,且构造方法必须的名称必须与类名相同. 2. Varargs.允许方法拥有一个可变长度的参数列表. 3. 对象的内存分配. ...

  10. 无需sendmail:巧用LD_PRELOAD突破disable_functions

    *本文原创作者:yangyangwithgnu,本文属FreeBuf原创奖励计划,未经许可禁止转载 摘要:千辛万苦拿到的 webshell 居然无法执行系统命令,怀疑服务端 disable_funct ...