当前位置：首页 > news >正文

uniapp设置vuex公共值状态管理

news 2025/10/31 13:41:00

uniapp 生成二维码图片[APP+H5+小程序等全端适配]

前言
- 第一步，创建根文件
- 第二步，配置index.js文件
- 第三步，全局引入vuex
- 第四步，页面中使用和定义
搞定 Vuex，全局值管理从此 “躺平”

前言

有时候我们会想设置一个值全局使用，但是使用 uni.getStorageSync 呢，会出现延迟或者无法取到的时候，怎么办呢？vuex解决问题，接下来我们从0—>1，只要四步就能为项目加入状态管理库

*注意*：默认懂vue的基本原理以及代码编写，所以文中只做快速实用导向讲解

第一步，创建根文件

直接在项目根目录下创建 store 文件夹，里面创建index.js文件
在这里插入图片描述

第二步，配置index.js文件

先把下面内容填入刚才创建的store/index.js

提示： clientId是我自定义的参数，大家可以更具自己的实际需求替换

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({// 状态管理：clientId由外部（如UniPush）获取后写入，初始化为空state: {//  clientId是我自定义的参数，大家可以更具自己的实际需求替换clientId: '' // 不再从本地存储读取，完全由外部通过mutation更新},// 同步修改：仅修改Vuex状态，不操作本地存储（废除持久化）mutations: {// 设置clientId（由app.vue中获取UniPush ClientID后调用）SET_CLIENT_ID(state, newClientId) {state.clientId = newClientId},// 清空clientId（如退出登录时）CLEAR_CLIENT_ID(state) {state.clientId = ''}},// 异步操作：保留接口调用能力，实际场景由外部触发后同步状态actions: {// 从接口获取并更新clientId（如需后端交互时使用）// fetchAndSetClientId({ commit }, apiParams) {//   return new Promise((resolve, reject) => {//     uni.request({//       url: `${apiParams.domain}/api/getClientId`,//       method: 'GET',//       data: apiParams.data,//       success: (res) => {//         if (res.data.code === 200 && res.data.data?.clientId) {//           commit('SET_CLIENT_ID', res.data.data.clientId)//           resolve(res.data.data.clientId)//         } else {//           reject(new Error('获取clientId失败'))//         }//       },//       fail: (err) => {//         reject(new Error('接口请求失败：' + err.errMsg))//       }//     })//   })// }},// 状态封装：适配组件中mapGetters的调用（login.vue中使用...mapGetters(['clientId'])）getters: {// 直接返回clientId，与组件中映射名称一致clientId: (state) => {return state.clientId},// 辅助判断是否存在有效clientIdhasClientId: (state) => {return !!state.clientId}}
})export default store

第三步，全局引入vuex

全局根目录找到main.js文件并进行下面的配置

在这里插入图片描述

在main.js中补充配置，让我们可以全局访问它

import Vue from 'vue'
import App from './App'
// 引入Vuex实例
import store from './store'// 将store挂载到Vue原型上，组件中可通过this.$store访问
Vue.prototype.$store = storeVue.config.productionTip = false //这一项可能重复，记得删除App.mpType = 'app' //这一项可能重复，记得删除const app = new Vue({...App,// 注册store（Vue2标准写法，确保全局生效）store //记得const app 中补充store 
})
app.$mount()

第四步，页面中使用和定义

在需要定义这个值单页面中，的方法中设置这个值，很简单，就一句

定义值
在获得值的地方定义，这里只展示最基础的用法

// 设置clientId的值
this.$store.commit('SET_CLIENT_ID', clientId);

在这里插入图片描述

调用值
然后在需要使用的页面中调用这个值，高频使用建议使用mapGetters 会更加规范

//引入部分
import { mapGetters } from 'vuex';//注入值
// 新增：映射Vuex的getters，直接用this.clientId访问
computed: {...mapGetters(['clientId'])
},

最后再方法中直接调用即可
在这里插入图片描述

搞定 Vuex，全局值管理从此 “躺平”

《四步攻略》你值得拥有👍，没有花里胡哨的绕路，从建文件夹到页面调用，每一步都是 “拿来就能用” ✌️的实在操作。
之前用uni.getStorageSync时，是不是总遇到 “明明存了却拿不到” 的尴尬？要么等延迟，要么反复查缓存，别提多闹心。现在有了 Vuex，全局值就像有了个 “专属管家”，存的时候一句commit搞定，用的时候mapGetters一引就来，APP、H5、小程序全端都能顺畅用，再也不用跟 “跨页面传值”“缓存延迟” 斗智斗勇。👏
要是你试的时候遇到啥小插曲，比如变量没定义、值没映射上，别慌 —— 回头看看哪步漏了，大概率是main.js没挂好，或者computed里忘了加mapGetters。毕竟咱这方案是踩过常见坑的，只要跟着步骤走，基本能一次成。
最后也欢迎大伙儿在评论区唠唠：你之前用全局值时踩过啥坑？现在用 Vuex 有没有更顺手？咱们互相抄抄作业，开发效率再提一提～
瑞思拜~🫰
在这里插入图片描述