前言
本专栏是基于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 } = payload
if (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数据共享），将在后续博文介绍。
