uniapp 生成二维码图片[APP+H5+小程序等 全端适配]
- 前言
- [搞定 Vuex，全局值管理从此 "躺平"](#搞定 Vuex，全局值管理从此 “躺平”)
前言
有时候我们会想设置一个值全局使用，但是使用 uni.getStorageSync 呢，会出现延迟或者无法取到的时候，怎么办呢？vuex解决问题，接下来我们从0--->1，只要四步就能为项目加入状态管理库
*注意*：默认懂vue的基本原理以及代码编写，所以文中只做快速实用导向讲解
第一步，创建根文件
直接在项目根目录下创建 store 文件夹，里面创建index.js 文件
第二步，配置index.js文件
- 先把下面内容填入刚才创建的store/index.js
提示： clientId是我自定义的参数，大家可以更具自己的实际需求替换
javascript
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中补充配置，让我们可以全局访问它
javascript
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()第四步，页面中使用和定义
在需要定义这个值单页面中，的方法中设置这个值，很简单，就一句
- 定义值
在获得值的地方定义，这里只展示最基础的用法
javascript
// 设置clientId的值
this.$store.commit('SET_CLIENT_ID', clientId);
- 调用值
然后在需要使用的页面中调用这个值，高频使用建议使用mapGetters 会更加规范
javascript
//引入部分
import { mapGetters } from 'vuex';
//注入值
// 新增：映射Vuex的getters，直接用this.clientId访问
computed: {
...mapGetters(['clientId'])
},最后再方法中直接调用即可
搞定 Vuex，全局值管理从此 "躺平"
《四步攻略》你值得拥有👍，没有花里胡哨的绕路，从建文件夹到页面调用，每一步都是 "拿来就能用" ✌️的实在操作。
之前用uni.getStorageSync时，是不是总遇到 "明明存了却拿不到" 的尴尬？要么等延迟，要么反复查缓存，别提多闹心。现在有了 Vuex，全局值就像有了个 "专属管家"，存的时候一句commit搞定，用的时候mapGetters一引就来，APP、H5、小程序全端都能顺畅用，再也不用跟 "跨页面传值""缓存延迟" 斗智斗勇。👏
要是你试的时候遇到啥小插曲，比如变量没定义、值没映射上，别慌 ------ 回头看看哪步漏了，大概率是main.js没挂好，或者computed里忘了加mapGetters。毕竟咱这方案是踩过常见坑的，只要跟着步骤走，基本能一次成。
最后也欢迎大伙儿在评论区唠唠：你之前用全局值时踩过啥坑？现在用 Vuex 有没有更顺手？咱们互相抄抄作业，开发效率再提一提～
瑞思拜~🫰
