ZHANGREN

您的位置：主页 > 使用vue全家桶高仿小米商城--vuex框架搭建

advertisement

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

作者：listener_zhang | 时间：2020-01-30 00:21 | 访问数： |

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

index.js里面的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import action from './action';
Vue.use(Vuex)
const state = {
username:'', //登录用户名
cartCount:0 //购物车商品数量
}
export default new Vuex.Store({
state,
mutations,
action
});

action.js里面的代码如下：

//商品Vuex-actions
export default {
}

随后我们要在main.js里面引入并加载vuex，如下图所示：

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

标签： vue vue全家桶 vuex

zhangren.online

您可能喜欢

Vue和jQuery实现数据双向绑定

Vue和jQuery实现数据双向绑定

2019年03月27日查看： 157

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

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

2020年01月30日查看： 137

使用vue全家桶高仿小米商城--订单父组件

使用vue全家桶高仿小米商城--订单父组件

2020年02月06日查看： 213

安装Vue-cli爬坑

2019年03月21日查看： 147

vue中非父子组件传值

2020年03月22日查看： 73

vue中父子组件传值

2020年03月22日查看： 230

回到顶部