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

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

相关推荐
万邦科技Lafite19 小时前
如何对接API接口?需要用到哪些软件工具?
java·前端·python·api·开放api·电商开放平台
知识分享小能手20 小时前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
看晴天了20 小时前
🌈 Tailwind CSS 常用类名总结
前端
看晴天了20 小时前
Tailwind的安装,配置,使用步骤
前端
看晴天了20 小时前
nestjs学习, PM2进程守护,https证书配置
前端
blues_C20 小时前
Playwright MCP vs Chrome DevTools MCP vs Chrome MCP 深度对比
前端·人工智能·chrome·ai·chrome devtools·mcp·ai web自动化测试
木心操作20 小时前
nodejs动态创建sql server表
前端·javascript·sql
一个很帅的帅哥20 小时前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
南屿im21 小时前
用 Node.js 开发命令行工具:打造你的高效 CLI
前端·javascript
ObjectX前端实验室1 天前
【react18原理探究实践】render阶段【首次挂载】
前端·react.js