vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址
前言
在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数,子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,这样就会变得很麻烦。而vue-v就可以帮助我们解决这个繁琐的问题。
npm安装
npm install vuex
开始使用
项目需求:实现购物车商品增加和减少,并计算出商品的总价。
目录结构
准备工作
第一步要引入在main.js中引入 vuex
import Vuex from 'vuex'
第二步注册vuex组件
Vue.use(Vuex)
第三步实例化Store
state:保存的是原始数据,可以理解为需要共享的数据或状态,
getters:可以理解为是staore的计算属性,可以实现就store的计算,但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。
mutations:mutations中的方法可以对state中的数据进行改变。
action:action中的方法可以调用mutations中的方法,但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法,例如通过context.commit('increment', price)increment是需要调用mutations中的方法名,price是需要传入的参数。 mutations中的方法再去更改state的原始数据。
代码示例
let store = new Vuex.Store({state: {totalPrice: 0},getters: {getTotal (state) {return state.totalPrice*2}},mutations: {increment (state, price) {state.totalPrice += price},decrement (state, price) {state.totalPrice -= price}},actions: {increase (context, price) {context.commit('increment', price)}}
})
如何在组件中获得state数据?
在组件内部使用 this.$store.state.属性名即可。
实例代码:
computed: {totalPrice () {return this.$store.state.totalPrice}
如何在组件中使用getters内的方法?
computed: {getTotal () {return this.$store.getters.getTotal}
}
如何在组件中使用mutations内的方法?
methods: {addOne () {this.$store.commit('increment', this.price)},minusOne () {this.$store.commit('decrement', this.price)}}
如何在组件中使用actions内的方法?
methods: {addOne () {this.$store.dispatch('increase', this.price)}}
转载于:https://www.cnblogs.com/waitforyou/p/6784838.html
vuex 实现vue中多个组件之间数据同步以及数据共享。相关推荐
- vue中,兄弟组件之间传值
vue中,兄弟组件之间传值 项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
- Vue中关于父子组件之间的通信
父子组件之间的通信是vue中的基础知识,在此做一个简单的梳理. 总的来说父传子是通过props,子传父是通过$emit. 简单的一个demo来说说,先上代码 父组件: 如图,HelloWorld是一个 ...
- Vue中实现父子组件的数据的双向绑定(vue.sync的用法)
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的 问题描述: 问题场景就是子组件传递数据给父 ...
- vue组件之间数据传递和通信方式总结
vue组件之间数据传递和通信方式总结 方式主要包括: 父组件=>子组件 | 单向数据流,props 子组件=>父组件 | 观察者模式,即vue的自定义事件 $emit 和 $on 非父子组 ...
- vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
- VUE中的父子组件通信
VUE项目中的父子组件之间的传值. 首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的 ...
- Vue中,一个组件调用其他组件的方法(非父子组件)
Vue中,一个组件调用其他组件的方法(非父子组件) 场景--B页面(组件)想调用 A页面(组件)中的方法:但是两个页面(组件)毫无关联(刷新 A的数据). 方式一:引用式 1.当前组件引入将要调用方法 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
- vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来 结构 首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...
最新文章
- Solr配置IK分词器
- TextView的跑马灯效果实现
- springboot+redis实现分布式session共享
- 面试官:说说一条查询SQL的执行过程?
- 开源免费的HTML5游戏引擎
- django-models类索引外键时候的related_name属性作用
- 计算机网络中什么叫总衰耗_计算机网络中的“带宽”,为什么是指“在单位时间内...
- 【单目标优化求解】基于matlab粒子群混沌混合蝴蝶优化算法求解最优目标问题(HPSOBOA)【含Matlab源码 1538期】
- linux系统gaussian09,高斯(Gaussian)软件linux下安装
- js之dialogArguments
- 网络操作系统项目教程----Windows server 2003篇----服务器远程管理与监控
- IDEA乱码解决合集
- 兜兜转转解决office和visio不能同时安装的问题
- el-upload手动上传图片并限制图片数量、大小和格式
- java webservice用户名密码_WebService 用户名密码验证
- GPS+北斗定位借助Arduino的数值显示
- 正确的iconv使用方法
- HackTheBox-baby WAFfles order
- 腾讯人力资源体系全曝光 附下载
- 服务器迁移虚拟化实施方案,VMVARE业务系统迁移上云方案