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 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅1 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
over6971 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
渣渣盟2 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_92 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖2 小时前
Webpack系列-Loader
前端·webpack
aggression3 小时前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo3 小时前
深入理解与实战 Git Submodule
前端
骑自行车的码农3 小时前
React 事件收集函数
前端·react.js
一个处女座的程序猿O(∩_∩)O3 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js