vue全家桶(4.2)
5.2、使用vuex重构上面代码
Vuex是什么?官方定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
Vuex的使用步骤: 1 安装Vuex
npm install vuex --save
2 在src目录下,新建store文件夹,在store文件夹下新建index.js文件
3 在index.js文件中输入以下代码
import Vue from 'vue'
import Vuex from 'vuex'
// 让vuex作为vue的插件来使用
Vue.use(Vuex)
// 创建一个容器
let store = new Vuex.Store()
// 把这个store实例导出 方便在vue中注入
export default store
4 把store实例注入到vue中,在main.js中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import '@/assets/style/index.css'
import store from '@/store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
接下来我们需要去使用vuex管理状态了,步骤
1、设置一个共享数据,在store/index.js里进行操作
//创建一个容器
let store = new Vuex.Store({
state: {
goods_num: 0
}
})
2、把这个状态映射到视图中, 在components/VuexShoppingCar.vue里面去操作
<template>
<div class="page">
<div class="goods">购物车一共有:<span>{{ num }}</span> 件商品</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
computed: {
num () {
console.log(this.$store.state)
return this.$store.state.goods_num
}
}
}
</script>
<style scoped>
.goods{
background-color: green;
width: 250px;
padding: 16px;
color: white;
}
.goods span{
color: red
}
</style>
3、提交一个mutation,这个mutation类似于js中的事件,有事件类型和事件处理函数,我们在事件处理函数中去更改全局的goods_num, 以下是VuexGoodsItem组件中的代码
<script type="text/ecmascript-6">
export default {
data () {
return {
num: 12
}
},
components: {
},
methods: {
increase () {
this.num++
},
decrease () {
this.num--
},
addCar () {
this.$store.commit('changeCar', this.num)
}
}
}
</script>
4、在store里面去增加一个mutation, 在store/index.js里面操作
import Vue from 'vue'
import Vuex from 'vuex'
// 让vuex作为vue的插件来使用
Vue.use(Vuex)
// 创建一个容器
let store = new Vuex.Store({
state: {
goods_num: 0
},
mutations: {
changeCar (state, num) {
console.log(state)
state.goods_num += num
}
}
})
// 把这个store实例导出 方便在vue中注入
export default store
注意: 在步骤3里面 this.$store.commit('changeCar', this.num) 这句中提交的changeCar,真正执行的逻辑在步骤4中,mutation设置的changeCar
螺钉课堂视频课程地址:http://edu.nodeing.com
vue全家桶(4.2)的更多相关文章
- 用 Vue 全家桶二次开发 V2EX 社区
一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...
- Vue全家桶
简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...
- 从零开始系列之vue全家桶(3)安装使用vuex
什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...
- 使用vue全家桶制作博客网站
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...
- 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程
使用vue全家桶制作博客网站 前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...
- Vue全家桶介绍
一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...
- 一个简单的假vue全家桶(vue+vue-router+require)
首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- Vue全家桶了解一下(待补充)
vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...
- 升级vue全家桶过程记录
背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...
随机推荐
- 使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置
使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...
- Linux(六)文件系统
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.根目录内容 1.概述 Linux系统中只有一个文件系统,以“/”作为根目录,从根目录出发可以找到任何 ...
- Java实现蓝桥杯历届试题回文数字
历届试题 回文数字 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 观察数字:12321,123321 都有一个共同的特征,无论从左到右读还是从右向左读,都是相同的.这样的数字叫做: ...
- Java实现 LeetCode 350 两个数组的交集 II(二)
350. 两个数组的交集 II 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入 ...
- Java实现夺冠概率模拟
足球比赛具有一定程度的偶然性,弱队也有战胜强队的可能. 假设有甲.乙.丙.丁四个球队.根据他们过去比赛的成绩,得出每个队与另一个队对阵时取胜的概率表: 甲 乙 丙 丁 甲 - 0.1 0.3 0.5 ...
- Linux 自动挂载与fstab文件修复
/etc/fstab文件 自动挂载就是写入/etc/fstab文件 vi /etc/fstab 其中,第九行是/分区的自动挂载信息,有6个字段 第一字段表示分区的UUID(硬盘通用唯一识别码,使用du ...
- 用户管理命令-passwd
passwd可以给用户设置密码或者修改密码,超级用户可以修改任何用户的密码,而且可以不遵守密码的复杂性原则,普通用户只能修改自己的密码,必须遵守密码的复杂性原则 passwd [选项] 用户名 常用选 ...
- (四)SQLMap之Tamper篡改脚本的类型、作用、适用场景
目录结构 一.SQLMap中tamper的简介 1.tamper的作用 2.tamper用法 二.适配不同数据库类型的测试tamper 三.SQLMap中tamper篡改脚本的功能解释 一.SQLMa ...
- XML基础(转)
一.XML是什么?作用是什么?1.XML是指可扩展标记语言(eXtensible Markup Language),用户自定义的标签.相对于HTML来讲的.2.XML被设计的宗旨是表示数据.HTML是 ...
- mysql 错误:Table is marked as crashed and should be repaired 解决办法
遇到这个问题几个敲命令轻松搞定 1.首先进入mysql命令台: mysql -u root -p 回车 输入密码 2.查询所有的库 mysql> show databases; 3.进入数据库“ ...