Vue学习27----Vuex 的使用state,mutations实现多个页面数据共享

本文介绍了Vuex作为Vue.js应用程序的状态管理模式,用于解决组件间数据共享和持久化的问题。遵循6步流程,详细讲解如何安装、配置Vuex以及在组件中使用state和mutations来读取和修改数据。通过实例展示了项目结构,包括store.js、Home.vue、HomeContent.vue、App.vue和main.js等文件的角色。提供了源码下载链接以供参考。
摘要由CSDN通过智能技术生成

vuex官网:
https://vuex.vuejs.org/zh/guide/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
1.vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享)
2.组件里面数据的持久化。
小项目不部建议用vuex

vuex的使用:(共享的数据)
1、安装vuex

cnpm install vuex --save

2、在src目录下面新建一个vuex的文件夹

3、在vuex 文件夹里面新建一个store.js

4、在store.js引入vue 引入vuex 并且use vuex

		import Vue from 'vue'
		import Vuex from 'vuex'
		Vue.use(Vuex)

5、在store.js中,定义数据


			/*1.state在vuex中用于存储数据*/
			var state={

			    count:1
			}

6、在store.js中,定义方法 mutations里面放的是方法,方法主要用于改变state里面的数据

   var mutations={

          incCount(state){

                     ++state.count;
                   },

       }

暴露

const store = new Vuex.Stor
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值