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

使用vue全家桶高仿小米商城--vuex框架搭建

说到Vuex确实有点蒙蔽,但是希望经过这次的学习可以进一步加深对Vuex的理解,当然也可以在vue官网上面去看看文档,那么接下来就是我们这次学习的总结了。
架构搭建在项目时候我们在src下新建了一个叫store的文件夹,这个文件夹就是为vuex准备的,首先在下面新建三个js文件,命名分别是:index.js、action.js、mutations.js

index.js里面的代码如下:

  1. import Vue from 'vue'  
  2. import Vuex from 'vuex'  
  3. import mutations from './mutations'  
  4. import action from './action';  
  5.   
  6. Vue.use(Vuex)  
  7.   
  8. const state = {  
  9.     username:'',   //登录用户名  
  10.     cartCount:0   //购物车商品数量  
  11. }  
  12. export default new Vuex.Store({  
  13.     state,  
  14.     mutations,  
  15.     action  
  16. });  
action.js里面的代码如下:
  1. //商品Vuex-actions  
  2. export default {  
  3.       
  4. }  
随后我们要在main.js里面引入并加载vuex,如下图所示:


随后打开浏览器里面的vue-devtools去查看写vuex是否搭建成功,下面是搭建成功的图:

zhangren.online
上一篇:使用vue全家桶高仿小米商城--拉取用户信息
下一篇:使用vue全家桶高仿小米商城--实战应用

您可能喜欢

回到顶部