【uni-app】uni-app使用vuex

本文介绍了如何在uni-app项目中集成并使用Vuex。首先,在项目根目录创建store文件夹并建立index.js,接着在index.js中引入Vuex,定义状态、 mutations和actions。然后,在main.js中注册全局$store变量,最后在应用的其他组件中便捷地调用Vuex进行状态管理和数据交互。
摘要由CSDN通过智能技术生成

1.在项目根目录下创建store文件夹,在文件夹下创建index.js

2.在store/index.js文件夹引入vuex,并且定义相关属性和方法

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
	// 全局属性变量
	state: {
		num: 1,
		name: '苹果',
		price: 10,
		testList: []
	},
	// 全局同步方法
	mutations: {
		add(state) {
			state.num++
		console.log(state.num);
		}
	},
	// vuex属性计算,在视图里面当做变量使用
	getters: {
		// 这个函数的执行依赖一个可变的变量
		count(state) { // num变化这个方法就会执行
			return state.num * state.price
		}
	},
	// 异步方法,调用方法:this.$store.dispath('xxx')
	actions: {
		testActions(context) {
			// context里面包含state、mutations、getters、actions
			console.log(context);
			// 执行一些异步操作,通用ajax
			setTimeout(() => {
				context.state.testList = ['猪猪侠', '超人强', '
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值