视频电商网站
来源:互联网 发布:修改jenkins的端口 编辑:程序博客网 时间:2024/04/25 05:01
我们的项目使用了Vuex
,关于Vuex
是什么看这里:
http://vuex.vuejs.org/zh-cn/intro.html
Vuex里有个Modules
的概念:
http://vuex.vuejs.org/zh-cn/modules.html
我们前面用户登录获取access_token等信息,都是写在UsersModule.js
这个module中的。
http://blog.csdn.net/github_26672553/article/details/70048077
Vuex多个module交互
我们的项目使用了Vuex
,关于Vuex
是什么看这里:
http://vuex.vuejs.org/zh-cn/intro.html
Vuex里有个Modules
的概念:
http://vuex.vuejs.org/zh-cn/modules.html
现在假如我们有一个VideosModule.js
专门用来处理我们视频模块(视频列表展示)
actions:{ loadVideos(context,params){ axios.get("localhost://xxxx/load-video.php?access-token").then(function(res){ console.log(res.data); }) }}
在这个地方,我们需要给access-token
赋值,需要获取保存在客户端的值了。
我们之前已经在UsersModules.js
里写好了:
state:{ currentUser:{ get UserName(){ let username = localStorage.getItem("currentUser_name"); if (username==null || username== undefined){ return "guest"; } return username; }, get UserToken(){ return localStorage.getItem("currentUser_token"); } } },
通过currentUser
就可以获取到。
但是现在我们是在VideosModule.js
里,我们又怎么样获取该数据呢?
可以通过context.rootState.users.currentUser
来获取。 users
是我们在入口文件member-index.js
给Vuex配置modules的名称。
其他:
一般来说不要把我们的业务代码放到modules里面,比如登录
loadVideos(context,params){ if(content.rootStae.users.currentUser.username == "guest"){ //去登录 Vue.prototype.function.needLogin(); }}
我们加载视频的时候如果用户没有登录,就去登录页。
needLogin()
函数哪来的?
fucction.js中定义的:
export default{ getVersion(){ return '1.0'; }, needLogin(){ self.location = "users/login"; }}
那又为何可全局调用呢?
这个就要看vue的插件知识了:
http://cn.vuejs.org/v2/guide/plugins.html
我们这里有一个global.js
就是一个插件,代码如下:
import functions from './function';import APIConfig from './../config/APIConfig';export default{ //Vue开发插件必须有的方法 //参考文档:http://cn.vuejs.org/v2/guide/plugins.html install(Vue){ Vue.prototype.functions = functions; Vue.prototype.APIConfig = APIConfig; }}
可以看到,在install
方法里设置了Vue.prototype.functions = functions
。
最后在入口文件中引入并使用这个插件就好了:
import global from './global'; //我们自己写的全局插件Vue.use(global);
- 视频电商网站
- 视频电商网站
- 视频电商网站
- 视频电商网站
- 视频电商网站实战 - 实战准备
- 视频电商网站实战 - 构建视频提交页面(上)
- 视频电商网站实战 - 开始编写会员中心脚手架代码
- 视频电商网站实战 - 构建视频提交页面:视频封面上传(上)
- 视频电商网站实战 - 视频上传:标签编辑框效果快速实现
- 视频电商网站视频上传准备:vue.js+七牛JSSDK集成(1)排坑
- 视频电商网站视频上传准备:vue+七牛JSSDK集成(2)上传视频时显示进度条
- 电商网站排行榜
- 电商网站汇总
- 电商网站
- 电商网站架构
- 视频电商网站实战 - 逐步完善代码结构、动态加载导航栏
- 视频电商网站实战 - 侧边栏菜单、整个后台的布局、路由配置
- 视频电商网站vue+七牛JSSDK集成(3)上传视频时暂停和续传
- 防止php重复提交表单更安全的方法
- HDU
- 10种纯css3制作的loading效果和源码分享
- 蓝桥杯:马虎的算式
- JVM加载class文件的原理机制是什么?类加载器的工作原理
- 视频电商网站
- 第三章 规划
- PHP 下载文件(中文不乱码)
- NOI2015 Day1
- 天降雄安不多见 还是踏实选择房地产BI解决方案
- 通过application实现网站访问计数器
- Android 进阶2:Activity 的 Task 与启动模式
- linux命令整理
- 使用CSS sprites减少HTTP请求