uniapp全局状态管理实现方案

Uniapp 全局状态管理实现方案

在 Uniapp 中实现全局状态管理有以下几种常用方法:

1. Vuex 状态管理(推荐)

Vuex 是 Vue 的官方状态管理库,适用于复杂应用的状态管理。

安装与配置

  1. 在项目中安装 Vuex:
bash 复制代码
npm install vuex --save
  1. 创建 store 目录结构:

    ├── store
    │ ├── index.js # 主入口文件
    │ ├── modules # 模块目录
    │ │ ├── user.js # 用户模块
    │ │ └── cart.js # 购物车模块

  2. 主入口文件示例 (store/index.js):

javascript 复制代码
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import cart from './modules/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
    cart
  }
})

export default store
  1. main.js 中引入:
javascript 复制代码
import store from './store'

const app = new Vue({
  store,
  ...App
})

使用示例

javascript 复制代码
// 在组件中使用
export default {
  computed: {
    // 获取状态
    username() {
      return this.$store.state.user.username
    }
  },
  methods: {
    // 提交 mutation
    updateUsername() {
      this.$store.commit('user/SET_USERNAME', 'newName')
    },
    // 分发 action
    fetchUserInfo() {
      this.$store.dispatch('user/fetchUserInfo')
    }
  }
}

2. 全局变量和事件总线

对于小型应用,可以使用简单的全局变量和事件总线:

全局变量

main.js 中定义:

javascript 复制代码
Vue.prototype.$globalData = {
  userInfo: null,
  token: ''
}

组件中使用:

javascript 复制代码
this.$globalData.userInfo = {name: 'John'}

事件总线

main.js 中创建:

javascript 复制代码
Vue.prototype.$eventBus = new Vue()

组件中使用:

javascript 复制代码
// 发送事件
this.$eventBus.$emit('user-login', userInfo)

// 接收事件
this.$eventBus.$on('user-login', (userInfo) => {
  console.log(userInfo)
})

3. Uniapp 自带的 globalData

App.vue 中定义:

javascript 复制代码
export default {
  globalData: {
    userInfo: null
  },
  onLaunch() {
    // 初始化
  }
}

任何页面获取和修改:

javascript 复制代码
// 获取
const app = getApp()
console.log(app.globalData.userInfo)

// 设置
app.globalData.userInfo = {name: 'John'}

4. Pinia(Vuex 的替代方案)

Pinia 是新一代的 Vue 状态管理库,更轻量且易于使用。

安装与配置

  1. 安装:
bash 复制代码
npm install pinia @pinia/nuxt
  1. main.js 中:
javascript 复制代码
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = new Vue({
  pinia,
  ...App
})
  1. 创建 store (stores/user.js):
javascript 复制代码
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John',
    age: 30
  }),
  actions: {
    updateName(newName) {
      this.name = newName
    }
  }
})
  1. 组件中使用:
javascript 复制代码
import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore()
    
    return {
      userStore
    }
  }
}

选择建议

  • 小型应用:使用 globalData 或事件总线
  • 中型应用:使用 Vuex
  • 新项目或喜欢新特性:考虑 Pinia

每种方案都有其适用场景,根据项目复杂度选择最合适的方案。

相关推荐
太阳伞下的阿呆1 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny2 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴2 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔3 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔3 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔3 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6143 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止4 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军4 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安4 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js