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. ...
随机推荐
- 洞悉MySQL底层架构:游走在缓冲与磁盘之间
提起MySQL,其实网上已经有一大把教程了,为什么我还要写这篇文章呢,大概是因为网上很多网站都是比较零散,而且描述不够直观,不能系统对MySQL相关知识有一个系统的学习,导致不能形成知识体系.为此我撰 ...
- 超干货!为了让你彻底弄懂MySQL事务日志,我通宵肝出了这份图解!
还记得刚上研究生的时候,导师常挂在嘴边的一句话,"科研的基础不过就是数据而已."如今看来,无论是人文社科,还是自然科学,或许都可在一定程度上看作是数据的科学. 倘若剥开研究领域的外 ...
- Java实现 洛谷 P1738 洛谷的文件夹
题目描述 kkksc03是个非凡的空想家!在短时间内他设想了大量网页,然后总是交给可怜的lzn去实现. 洛谷的网页端,有很多文件夹,文件夹还套着文件夹. 例如:/luogu/application/c ...
- Java实现 蓝桥杯 算法提高 最长滑雪道
试题 算法提高 最长滑雪道 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 小袁非常喜欢滑雪, 因为滑雪很刺激.为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上 ...
- 嵌入式Linux学习笔记(六) 上位机QT界面实现和串口通讯实现
目录 (1).参考资料 (2).QT界面布局实现 (3).数据和操作逻辑 在上一章我们实现了下位机的协议制定,并通过串口通讯工具完成了对设备内外设(LED)的状态修改,下面就要进行上位机软件的实现了( ...
- WinUI 3试玩报告
1. 什么是 WinUI 3 在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI.Wi ...
- CentOS7 yum 安装配置 MySQL 5.7
1.配置yum源 # 下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装 ...
- 使用PyQtGraph绘制数据滚动图形(4)
app = pg.QtGui.QApplication([]) win = pg.GraphicsWindow(title="数据滚动") win.resize(600,300) ...
- thinkphp5集成GatewayWorker
Workerman是一款纯PHP开发的开源高性能的PHP socket 服务器框架,而GatewayWorker则是基于Workerman开发的一个长连接框架,支持分布式部署,支持全局广播或者向任意客 ...
- IDEA环境Spring Boot 2.3整合Activiti 6.0,启动项目初始化表并创建核心服务
如下步骤照着抄就完事了. 一.新建一个spring boot项目,并引入相关依赖 <?xml version="1.0" encoding="UTF-8" ...