VUEX入门教程

首先,新建一个vue项目,在命令行中使用:vue init webpack web
然后,安装vuex,使用命令:npm install vuex --save
出现以下代码提示显示安装成功:
在这里插入图片描述
首先,我们在src目录下新建文件夹 store,在当前文件夹中新建文件index.js
在这里插入图片描述
在当前的index.js文件中,我们在文件中引用入ue和vuex,在vue中注册vuex,创建vuex.Store实例保存到变量store中

在这里插入图片描述
再使用export default导出store
在这里插入图片描述
然后再mian.js文件中引入该index,js文件,在文件中添加import store from ‘./store’; 然后在vue实例全局引入store对象
在这里插入图片描述
在这里插入图片描述
数据保存:State
vuex中的数据源,我们需要保存的数据就保存在这里,可以在store文件夹中的index.js页面创建的Vuex实例中,定义需要保存的数据。
在这里插入图片描述
可以在模板页面通过this.$store.state来获取我们定义的数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值