用vuex写了一个购物车H5页面的示例代码
179 浏览量
2020-10-17
16:30:16
上传
评论
收藏 75KB PDF 举报
用用vuex写了一个购物车写了一个购物车H5页面的示例代码页面的示例代码
本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码，文中通过示例代码介绍的非常详细，对大家的
学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
通过购物车的一个案列，把vuex学习了一篇。
vuex概念浅谈概念浅谈
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证
状态以一种可预测的方式发生变化。简单的来说，就是数据共用，对数据集中起来进行统一的管理。
如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个
中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
核心概念主要有这些
State
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态，将所需要的数据写放这里，类似于data。
Getter
有时候我们需要从 store 中的 state 中派生出一些状态，使用Getter，类似于computed。
Mutation
更改 Vuex 的 store 中的状态的唯一方法，类似methods。
Action
Action 提交的是 mutation，而不是直接变更状态，可以包含任意异步操作，这里主要是操作异步操作的，使用起来几乎和
mutations方法一模一样,类似methods。
Module
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自
己的 state、mutation、action、getter、甚至是嵌套子模块。
vuex
首先需要创建一个Vue项目
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
安装安装vuex
npm install --save vuex
对对vuex进行配置进行配置
1.创建一个store文件夹
2.在store文件夹下创建如图的一系列js文件
3.在main.js文件中引入上面创建的store.js
import store from './store'
new Vue({
评论0
最新资源