前言
本專欄是基于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數據共享），將在后續博文介紹。
)
