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)的更多相关文章

  1. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  2. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  3. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  4. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  5. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  6. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  7. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. Vue全家桶了解一下(待补充)

    vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...

  10. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...

随机推荐

  1. 使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置

    使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...

  2. Linux(六)文件系统

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.根目录内容 1.概述 Linux系统中只有一个文件系统,以“/”作为根目录,从根目录出发可以找到任何 ...

  3. Java实现蓝桥杯历届试题回文数字

    历届试题 回文数字 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 观察数字:12321,123321 都有一个共同的特征,无论从左到右读还是从右向左读,都是相同的.这样的数字叫做: ...

  4. Java实现 LeetCode 350 两个数组的交集 II(二)

    350. 两个数组的交集 II 给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2,2] 示例 2: 输入 ...

  5. Java实现夺冠概率模拟

    足球比赛具有一定程度的偶然性,弱队也有战胜强队的可能. 假设有甲.乙.丙.丁四个球队.根据他们过去比赛的成绩,得出每个队与另一个队对阵时取胜的概率表: 甲 乙 丙 丁 甲 - 0.1 0.3 0.5 ...

  6. Linux 自动挂载与fstab文件修复

    /etc/fstab文件 自动挂载就是写入/etc/fstab文件 vi /etc/fstab 其中,第九行是/分区的自动挂载信息,有6个字段 第一字段表示分区的UUID(硬盘通用唯一识别码,使用du ...

  7. 用户管理命令-passwd

    passwd可以给用户设置密码或者修改密码,超级用户可以修改任何用户的密码,而且可以不遵守密码的复杂性原则,普通用户只能修改自己的密码,必须遵守密码的复杂性原则 passwd [选项] 用户名 常用选 ...

  8. (四)SQLMap之Tamper篡改脚本的类型、作用、适用场景

    目录结构 一.SQLMap中tamper的简介 1.tamper的作用 2.tamper用法 二.适配不同数据库类型的测试tamper 三.SQLMap中tamper篡改脚本的功能解释 一.SQLMa ...

  9. XML基础(转)

    一.XML是什么?作用是什么?1.XML是指可扩展标记语言(eXtensible Markup Language),用户自定义的标签.相对于HTML来讲的.2.XML被设计的宗旨是表示数据.HTML是 ...

  10. mysql 错误:Table is marked as crashed and should be repaired 解决办法

    遇到这个问题几个敲命令轻松搞定 1.首先进入mysql命令台: mysql -u root -p 回车 输入密码 2.查询所有的库 mysql> show databases; 3.进入数据库“ ...