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. bat(续六)-windows批处理set命令

    windows批处理set命令 [设置变量]格式:set 变量名=变量值详细:被设定的变量以%变量名%引用 [取消变量]格式:set 变量名=详细:取消后的变量若被引用%变量名%将为空 [展示变量]格 ...

  2. svn根据项目来创建目录结构或者根据分支来创建项目结构

    假设检出项目的时候,都使用trunk来进行检出 按照项目来创建目录结构 TestPrj版本库 适合一次只检出一个项目的需求 这个版本库的名字无所谓,随便起就好了.因为检出某一个项目的trunk的时候, ...

  3. url拼接

    在做网页抓取的时候经常会遇到一个问题就是页面中的链接是相对链接,这个时候就需要对链接进行url拼接,才能得到绝对链接. url严格按照一定的格式构成,一般为如下5个字段: 详细可参考RFC:http: ...

  4. linux一键安装php脚本

    #!/bin/sh echo "----------------------------------start install php --------------------------- ...

  5. mvn deploy返回400错误的几种可能

    user credentials are wrong url to server is wrong user does not have access to the deployment reposi ...

  6. 面向对象-PHP面向对象的特性

     1.类和公有化 class Computer {     //什么叫做类内,就是创建类的花括号内的范围叫做类内,其他地方则类外.     //public 是对字段的公有化,这个字段类外即可访问,赋 ...

  7. Android ---------高德卫星地图绘制多个点和点的点击事件自定义弹窗

    最近开发中,遇到一个多个点绘制,并实现点击事件,出现自定义窗口显示相关信息等功能,所以写了这篇博客. 从后台请求数据,得到多个经纬度,然后绘制在地图上,并实现点击,出现相关信息(自定义弹框实现) 先来 ...

  8. Python连接SQLite数据库代码

    import sqlite3 # create database conn = sqlite3.connect('test.db') #不存在就创建后再打开 print ("Opened d ...

  9. ffmpeg播放RTSP的一点优化

    简单记录一下最近使用ffmpeg播放RTSP做的一点参数优化. 先做如下定义: AVDictionary* options = NULL; 1.画质优化 原生的ffmpeg参数在对1920x1080的 ...

  10. 基于java的https双向认证,android上亦可用

    From: http://my.oschina.net/jjface/blog/339144 概述: 客户端,浏览器或者使用http协议和服务器通信的程序. 如: 客户端通过浏览器访问某一网站时,如果 ...