问题描述

随着应用复杂度的增加,vuex用一个 store/index.js 文件来描述已经很难维护了,我们想把这些状态分割到单独文件里面。

参考1:https://vuex.vuejs.org/zh/guide/structure.html

参考2:https://github.com/PanJiaChen/vue-element-admin

[ 最终项目结构 ]

E:.

├─components
│ article.vue
│ header.vue
│ sidebar.vue
│ ...

├─router
│ index.js

├─store
│ index.js

└─ modules
article.js
header.js
sidebar.js

解决方案

1. article.js / header.js / sidebar.js

注意开启了namespaced,在取的state的时候要这样写: this.$store.state.article.msg

const state = {
msg:''
}
const mutations = {
CHANGE_MSG:(state,val)=>{
state.msg = val
}
}
const actions = {
change_msg(context,val){
context.commit('CHANGE_msg',val)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}

2. index.js

  1. 注意mymodules的构成

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
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 mymodules = 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
}, {}) /**
mymodules:{
article:{
namespaced:true,
state:{},
...
},
header:{
namespaced:true,
state:{},
...
}
}
*/
console.log(mymodules)
const store = new Vuex.Store({
modules:mymodules
}) export default store

[ vue ] 解耦vuex(按照组件来组织vuex的结构)的更多相关文章

  1. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

  2. [Vue] vuex进行组件间通讯

    vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ...

  3. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  4. vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  5. 在vue组件中使用vuex的state状态对象的5种方式

    下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...

  6. vue的挖坑和爬坑之vuex的简单入门

    首先vuex的中文文档https://vuex.vuejs.org/zh-cn/ 首先vuex是什么,官方解释是 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...

  7. vue全家桶+Koa2开发笔记(1)--vuex

    1.  安装webpack的问题: webpack坑系列--安装webpack-cli 2.  vue-cli(vue脚手架)超详细教程 3.  在命令行中使用 touch 执行新建文件: 4.  关 ...

  8. vuejs组件交互 - 03 - vuex状态管理实现组件交互

    组件交互模式的使用场景 简单应用直接使用props down,event up的模式就可以了 小型应用使用事件中心模式即可 中大型应用使用vuex的状态管理模式 vuex 包含要管理的应用数据和更新数 ...

  9. [前端] VUE基础 (9) (element-ui、axios、Vuex)

    一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...

随机推荐

  1. 关于ssh-keygen 生成的key以“BEGIN OPENSSH PRIVATE KEY”开头

    现在使用命令 ssh-keygen -t rsa  生成ssh,默认是以新的格式生成,id_rsa的第一行变成了"BEGIN OPENSSH PRIVATE KEY" 而不在是&q ...

  2. BS版本的TCP程序

    // 使用Socket对象中的方法getInputStream,获取到网络字节输入流InputStream对象 InputStream is = socket.getInputStream();// ...

  3. shell脚本 binlog方式增量备份mysql

    一.简介 源码地址 日期:2018/4/12 介绍:复制Binlog日志方式的增量备份脚本,并保存固定天数的备份 效果图: 二.使用 适用:centos6+ 语言:中文 注意:使用前先修改脚本中变量 ...

  4. Linux下安装中文字体

    目录 一.Centos系列 二.Ubuntu系列 一.Centos系列 1.安装字体库 yum -y install fontconfig 2.添加中文字体,建立存储中文字体的文件夹 mkdir /u ...

  5. 『学了就忘』Linux系统管理 — 82、Linux中进程的查看(ps命令)

    目录 1.ps命令介绍 2.ps aux命令示例 3.ps -le命令示例 4.pstree命令 1.ps命令介绍 ps命令是用来静态显示系统中进程的命令. 不过这个命令有些特殊,它部分命令的选项前不 ...

  6. Android工具-DDMS

    原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6686578 本文章的前提:已经安装了Eclipse和ADT.androi ...

  7. pwnable_start

    第一次接触这种类型的题,例行检查一下 题目是32位 没有开启nx保护可以通过shellocode来获得shell 将题目让如ida中 由于第一次碰到这种题,所以我会介绍的详细一点, 可以看到程序中调用 ...

  8. 私有化 : _x: 单前置下划线,私有化属性或方法;__xx:双前置下划线;__xx__:双前后下划线;属性property

    私有化 xx: 公有变量 _x: 单前置下划线,私有化属性或方法,from somemodule import *禁止导入,类对象和子类可以访问 __xx:双前置下划线,避免与子类中的属性命名冲突,无 ...

  9. python爬取信息到数据库与mysql简单的表操作

    python 爬取豆瓣top250并导入到mysql数据库中 import pymysql import requests import re url='https://movie.douban.co ...

  10. JAVA地址通过百度地图API转化为经纬度

    public static Map getLngAndLat(String address) { Map map = new HashMap(); String url = "http:// ...