vue项目开发中,大型项目一般vuex所需要存储的状态一般都很都,这时,我们便需要进性模块化划分,然后 再页面中采用映射来实现state的调用:
目录一般如下:

store为总的状态库存放文件。
modules为状态库的模块化划分。
getters为所有的state中的变量的一个映射
index为vuex的一个入口文件
这里现在有这样一个需求:
首页引入header组件和侧边栏组件,头部组件动态控制侧边栏的现实和隐藏。通过改变vuex状态来实现
aslide状态如下:
const aslide = {
state: {
isShow: false
},
mutations: {
changeStatus: function (state) {
let isShow = !state.isShow;
state.isShow = isShow;
}
}
}
export default aslide;
下来再getters中添加映射
const getters = {
// 侧边栏 isShow: state = > state.aslide.isShow
};
export default getters;
下来,通过主入口文件引入所有的状态库模块,然后导出
import Vue from "vue";
import Vuex from "vuex";
import aslide from "./modules/aslide";
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
aslide
},
getters
})
export default store
最后一步:
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"
Vue.config.productionTip = false;
// 全局路由返回,再页面返回上级页面时,可以通过调用back方法返回上级页面
Vue.prototype.back = (route) = > {
route.animate = 2; //设置路由返回页面的动画方式
window.history.go(-1); //返回一级页面
};
// 引入Mint-ui全部组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);
/*公共样式引入*/
import './styles/index.css'
/*工具类*/ import './utils/rem.js'
import Utils from './utils/common.js';
const utils = new Utils();
Vue.prototype.$utils = utils;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
下来,我们针对vuex进行基本的调用
修改,调用vuex中的方法,我们还是和平时一样,详情见vuex一,二,三,总结
this.$store.commit('changeStatus');
如何调用vuex中state中的变量呢?
import { mapGetters } from 'vuex'
computed: {
...mapGetters([
'isShow'
])
},
...mapGetters可以说是将状态库中的所有的state中的变量混入到computed中以便实时监听。
我们就可以再created之后通过console.log(this.isShow)获取状态,就可以直接再页面中使用
 
下来我们公共样式及工具的全局设置

大家可以看到styles和utils,这两个文件可以说是自己对样式的一个封装和方法的一个封装。
具体文件,再每个项目中 ,大家都可以用得到,使用得当,可以很大程度上减少开发的时间
大家再styles创建入口文件index.css
@import 'css/common.css';
@import './css/function.css';
@import './css/phone-reset.css';
关键 是配置main.js上面已经有main.js,可以查看上述main.js。
然后我们就可以直接再页面中使用样式 比如再类名中添加 class="df-c"就是说给该元素添加弹性和并居中
工具的使用呢。我们可以通过
mounted () {
let result = this.$utils.isString("sss");
console.log(result);
}
通过this.$utils.方法名  就可以调用我们utils中的所有的方法了。
 
注:此页的实现需要配合博客中
工具类=》js工具类的封装(https://www.cnblogs.com/bgwhite/p/9485507.html
 
 
 

vuex秘籍的更多相关文章

  1. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  2. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  3. Java正则速成秘籍(一)之招式篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  4. Java正则速成秘籍(二)之心法篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  5. Java正则速成秘籍(三)之见招拆招篇

    导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...

  6. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  7. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  8. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  9. vuex

    英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)

随机推荐

  1. [转][修]C清空输入缓冲区

    为何要清空输入缓存区     读取时输入缓冲区中的内容会被scanf函数逐个取走,正常case下scanf()函数可以根据返回值判断成功取走的数目:但当发生读取异常之后,输入缓冲区中的内容并未被取走, ...

  2. Mybatis中使用自定义的类型处理器处理枚举enum类型

    知识点:在使用Mybatis的框架中,使用自定义的类型处理器处理枚举enum类型 应用:利用枚举类,处理字段有限,可以用状态码,代替的字段,本实例,给员工状态字段设置了一个枚举类 状态码,直接赋值给对 ...

  3. c#的逆向工程-IL指令集

    一些 IL 语言解释:  跳转指令集合 Public field Static     Beq     如果两个值相等,则将控制转移到目标指令. Public field Static     Beq ...

  4. [译]JavaScript需要类吗?

    [译]JavaScript需要类吗?   原文:http://www.nczonline.net/blog/2012/10/16/does-javascript-need-classes/ 译者注:在 ...

  5. awk字符串处理

    awk 字符串处理函数 awk提供了许多强大的字符串函数,见下表:awk内置字符串函数gsub(r,s)    在整个$0中用s替代rgsub(r,s,t)    在整个t中用s替代rindex(s, ...

  6. elasticsearch 集群的安装部署

    一 介绍 elasticsearch 是居于lucene的搜素引擎,可以横向集群扩展以及分片,开发者无需关注如何实现了索引的备份,集群同步,分片等,我们很容易通过简单的配置就可以启动elasticse ...

  7. python脚本10_打印斐波那契数列的第101项

    #打印斐波那契数列的第101项 a = 1 b = 1 for count in range(99): a,b = b,a+b else: print(b) 方法2: #打印斐波那契数列的第101项 ...

  8. Codeforces Round #423

    这一次又崩了,最后只a了一题(还是被hack后才发现的错误) 第一题水题,多用一个数保存2-1后的数,注意先用2的桌子,再用这个 #include<map> #include<set ...

  9. JWT(JSON Web Token) Java与.Net简单编码实现

    参考 JWT(JSON WEB TOKENS)-一种无状态的认证机制 基于Token的WEB后台认证机制 各种语言版本的基于HMAC-SHA256的base64加密 Java与.Net实现实现 // ...

  10. Vim代码缩进设置

    前段配置VPS,无奈只能使用Vim编辑Python代码,比较头疼的没法设置自动缩进,所以搜索了相关的配置,特记录如下. 将以下的设置加入到~/etc/vim/.vimrc中: set sw=4 set ...