＜uniapp＞＜vuex＞＜状态管理＞在uniapp中，如何使用vuex实现数据共享与传递？

前言

本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。

发文平台

CSDN

环境配置

系统：windows
平台：visual studio code、HBuilderX（uniapp开发）
语言：javascript、html、vue
库：websocket、http

概述

本文主要介绍一下在uniapp中如何使用vuex来实现状态管理，即数据在页面与组件间的传递与共享。

注：本文是uniapp开发学习过程的一个记录，权作为以后参考。

1、vuex简介

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

vuex与全局变量的区别：

什么时候需要用vuex？

• 当一个组件需要多次派发事件时。例如购物车数量加减。
• 跨组件共享数据、跨页面共享数据。例如订单状态更新。
• 需要持久化的数据。例如登录后用户的信息。
• 当您需要开发中大型应用，适合复杂的多模块多页面的数据交互，考虑如何更好地在组件外部管理状态时。

vuex作为状态管理，有5个核心：state、getter、mutation、action、module。

2、简单示例

先看下在uniapp中使用vuex的简单示例。我们在项目的根目录下面，新建一个目录：
store，在store路径下创建index.js文件，并添加代码：

import { createStore } from 'vuex'
const store = createStore({state:{name:'zhou',age:'30'}
})
export default store

注意：以上代码是基于vue3版本下的，如果是vue2，则代码如下：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 创建 Vuex 实例
const store = new Vuex.Store({state: {name:'zhou',age:'30'}
})// 导出默认实例
export default store

我们继续，以上我们新建一个store实例，我们需要在导入它，在main.js文件中添加：

import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({//store,//注入Vuex实例，此处是vue2版本用法...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
//
import store from './store'
import Vuex from 'vuex'
export function createApp() {const app = createSSRApp(App)app.use(store)return {app}
}
// #endif

以上是uniapp自动生成的项目文件中main.js的结构，其中：

import store from './store'
import Vuex from 'vuex'
...
app.use(store)

以上三行代码是我们添加的，用于调用store。
然后我们可以在页面中访问数据了：

computed:{...mapState({name:state=>state.name,age:state=>state.age}),// getname(){// 	return this.$store.state.name// },// getage(){// 	return this.$store.state.age// }}

如上，我们访问store是在computed中来访问的，上面有两种方法，一种是单个获取，一种是批量获取，对于有多个变量的需求来说，显然使用mapState更便捷。
使用变量：

<text>name:{{ name }}</text>
<text>age:{{ age }}</text>

变量值显示：

以上是简单示例。

3、实例使用

假设我们有一组数据：

position、speed、current、torque

这一组数据是通过websocket通讯获取，以较高频率实时更新。
与第二步类似，我们先在store中创建这些变量：

import { createStore } from 'vuex'
const store = createStore({state:{position:'',//位置值speed:'',//速度值current:'',//电流值torque:''//力矩值}
})
export default store

注意：理论上，我们这样创建的变量，在页面调用时，是可以直接修改其值的：

this.$store.state.position = '1000';

vue也能监控并刷新，但是基于vuex的设计理念，不推荐这样直接修改状态，而是使用vuex的另一个核心功能：mutations。
因此，我们为state的变量增加修改值的功能：

state:{position:'0',//位置值speed:'0',//速度值current:'0',//电流值torque:'0'//力矩值},mutations:{setPosition(state,value){state.position = value},setSpeed(state,value){state.speed = value},setCurrent(state,value){state.current = value},setTorque(state,value){state.torque = value}}

如上，我们为store实例增加了mutations，并且在其中添加了四个函数，分别是用于修改相应变量值的。
注：如果你看到上面四个函数，觉得逻辑都相似，是不是可以写成一个通用函数，结果是，可以。
所以，我们可以写一个通用函数：

setValue(state,payload){const { key,value } = payloadif (state.hasOwnProperty(key)){state[key] = value} else {console.log('未发现共享变量！')}}

这里是使用了payload来传递参数，payload可以是一个结构体，比如，这里，我们传入一个key用于获取state的变量，value用于赋值。
以上函数编写完成后，我们可以在页面调用：

methods: {...//省略其他代码...mapMutations(['setValue','setPosition','setSpeed']),setValues(){const key = 'position';const value = '1234';this.setValue({key,value});},setPosi(){const value = '1000';this.setPosition(value);},setSpd(){const spd = '122';this.setSpeed(spd);}

如上，我们使用mapMutations来访问mutations中函数。
然后，我们可以分别使用其中的函数：
如：

setValues(){const key = 'position';const value = '1234';this.setValue({key,value});}

上面是通用函数，根据传入的key和value来执行，也可以使用单独的值修改函数：

setPosi(){const value = '1000';this.setPosition(value);}

我们可以来看一下演示：

注：本文是学习记录，但是以上代码经过测试，vuex的状态管理方案，将用在其他项目需求上（websocket数据共享），将在后续博文介绍。