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

详细介绍：uniapp设置vuex公共值状态管理

news 2026/4/4 8:07:26

详细介绍：uniapp设置vuex公共值状态管理

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
},
// 辅助判断是否存在有效clientId
hasClientId: (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 = store
Vue.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 有没有更顺手？咱们互相抄抄作业，开发效率再提一提～
瑞思拜~
在这里插入图片描述