当前位置:首页 > 前端 > uniapp > 正文内容

在uniapp(VUE3)项目中引入并使用vuex

virtualman4个月前 (08-05)uniapp716

1、在项目中下载并安装vuex

npm install vuex --save

2、在根目录下创建文件/store/store.js

import {
	createStore
} from 'vuex' //导入createStore构造函数
export default createStore({
	state: { //Vuex的状态,实际上就是存数据的地方
		location: {
			lat: 0,
			lng: 0
		}
	},
	getters: { //提供获取Vux状态的方式, 注意在组件中调用时,以属性的方式被访问
		getLocation(){
			return state.location
		}
	},
	mutations: { //提供直接操作Vuex的方法,注意mutations里的方法中不能有任何异步操做
		setLocation(state, value) {
			//第一个参数state为Vuex状态;第二个参数为commit函数传来的值
			state.person.age += value
		}
	},
	actions: { //提供通过mutations方法来简介操作Vuex的方法
		ageGrow(context, value) {
			//第一个参数context为上下文,提供一些方法;第二个参数为dispatch函数传来的值
			context.commit('ageGrow', value)
		}
	},
})

3、在main.js中引入store.js

import App from './App'
import uviewPlus from '@/uni_modules/uview-plus' //引入 第三方组件 uview-plus
import store from '@/store/store.js'; //引入vuex
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store)
	return {
		app
	}
}

4、在项目中需要使用的地方引入调用

import {useStore} from 'vuex' 

const store = useStore();    //获取store对象
let location= store.getters.getLocation ;

相关文章

UNIAPP微信小程序开发蓝牙接口在IOS与安卓系统下的不同

UNIAPP微信小程序开发蓝牙接口在IOS与安卓系统下的不同

最近在做涉及车辆蓝牙开关锁的工作,在微信小程序中踩了不少关于蓝牙的坑,主要有以下三点: 1、mac地址获取方式不同 使用uni.getBluetoothDevices或者uni.onBluetoothDeviceFound 监听附近蓝牙设备时,在安卓系统下,device_id就是设备实际mac地...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。