uniapp中 使用store、修改store

本文介绍了如何在uni-app中应用Vuex进行状态管理。首先在根目录创建store.js,导入并使用Vuex,实例化Store,并定义state和mutations。接着在main.js全局引入store。当需要修改store中的数据时,可以通过组件内的methods调用this.$store.commit触发mutations中的方法。此教程详细阐述了uni-app中与Vue相同的状态管理流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uni中使用store是和vue是一样的道理,知道vue中store的使用 uni里便也是相同的方法

一、在根目录创建store.js

//引用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//实例store对象
const store = new Vuex.Store({
	state: {
		proid: 123,
	},
    //mutations是修改store数据入口
	mutations: {
		proid(state, msg) {
			state.proid = msg;
		},
	}
})

//导出store对象
export default store

二、在main.js中全局引入store

这样就可以使用store中存的数据了

另外如果要对store中的数据进行修改如下:

//chackbtn是需要发生修改时绑定的事件
//通过commit触发store中muations里定义的方法 实现store里数据的修改
checkbtn(index,id,name){ 
		this.$store.commit("proid",id)
    },

 

 

### 如何在 UniApp Vue3 中实现 Store 状态管理 #### 创建 Vuex Store 文件 为了使项目结构清晰,在 `src` 目录下创建名为 `store` 的文件夹,并在其内部建立一个 JavaScript 文件来定义全局的状态仓库。此文件通常命名为 `index.js` 或者 `store.js`。 ```javascript // src/store/index.js import { createStore } from 'vuex' export default createStore({ state: { uid: '' }, mutations: { SET_UID (state, payload) { state.uid = payload; } }, actions: { apiGetUid ({ commit }, id) { // 假设这里有一个异步操作获取uid setTimeout(() => { commit('SET_UID', id); }, 1000); // 模拟网络延迟 } } }) ``` #### 初始化应用并注册 Store 接着修改项目的入口文件 `main.js` 来初始化应用程序实例以及安装已创建好的 store 实例[^2]。 ```javascript // main.js import App from './App' import store from './store' import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) app.use(store) return { app } } ``` #### 使用 Store 进行状态读取与更新 最后可以在组件内通过组合式 API 方式轻松访问到存储于 store 内的数据,如下所示: ```javascript // SomeComponent.vue <script setup> import { onLoad } from '@dcloudio/uni-app'; import { useStore } from 'vuex'; const store = useStore(); onLoad(() => { if (store.state.uid === "2233") { store.dispatch("apiGetUid", "新的UID"); } }); </script> <template> <!-- 组件模板 --> </template> ``` 上述代码展示了如何在一个页面加载时检查特定条件并向服务器请求数据的过程[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值