一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--实战应用
advertisement

使用vue全家桶高仿小米商城--实战应用

用户登入数据
1、首先到login.vue中派发action

2、actions.js代码如下:

  1. export default {  
  2.     saveUserName (context, username){  
  3.         context.commit('saveUserName',username)  
  4.     }  
  5. }  
3、mutations代码如下:
  1. export default {  
  2.     saveUserName(state,username){  
  3.         state.username = username  
  4.     }  
  5. }  
4、NavHeader.vue中读取username变量,如下图所示:


5、app.vue中存值,如下图所示 :

6、由于数据存在延迟,所以我们需要用到的就是计算属性(computed)了,在NavHeader.vue中做以下修改,如图所示:

然后不管你浏览器怎么刷新,只要你登录了username就有值,如下图所示:

订单数量
 
1、action.js中新增以下代码:
2、mutations.js中新增以下代码:

3、app.vue中新增以下代码:

4、NavHeader.vue中新增两处,如下图所示:




zhangren.online
上一篇:使用vue全家桶高仿小米商城--vuex框架搭建
下一篇:使用vue全家桶高仿小米商城--产品站参数组件实现

您可能喜欢

​vue使用组件的细节

​vue使用组件的细节

​Vue的生命周期及代码实例

​Vue的生命周期及代码实例

回到顶部