uniapp设置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 有没有更顺手？咱们互相抄抄作业，开发效率再提一提～
瑞思拜~🫰