uniapp使用Vuex mapGetters全局变量

前言

现在需要满足这样一个场景：
很多页面都要共用一个变量的值，同时要监听变量值的变化，随之做相应的操作，如果用页面传参之类的方法就太费劲了，所以采用Vuex的mapGetters来解决！！！
首先明白actions、mutation的概念

定义comm.js文件

这个文件主要定义state和mutations

const common  = {
    
    
	//state  代表仓库区   里面存储数据
	state:{
    
    
		//可定义多个属性
		socketMsg:{
    
    }, 
		messageCount:0,
	},
	mutations:{
    
    
		//在此处定义存数据的方法
		SET_MESSAGE_COUNT:(state,count)=>{
    
    
			state.messageCount = count
		},
		SET_SOCKET_MSG:(state,socketMsg)=>{
    
    
			state.socketMsg = socketMsg
		},
	}
}

export default common;

定义getters.js文件

给属性添加getter方法

const getters = {
    
    
	messageCount:state=> state.common.messageCount,
	socketMsg:state => state.common.socketMsg
}

export default getters;

定义index.js文件

整合到全局Vue上

import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters.js'
import common from './modules/common.js'

Vue.use(Vuex)
const store = new Vuex.Store({
    
    
	modules:{
    
    
		common,
	},
	getters
})

export default store

使用

在vue页面里使用

computed: {
    
    
	...mapGetters(['messageCount', 'socketMsg'])
},

监听值的变化

监听socketMsg的变化；
immediate：监听首次绑定触发
deep：监听对象里边的属性变化也触发，简单类型可以不用，比如字符串，数字之类的变量。

watch: {
    
    
	socketMsg(newLength, oldLength) {
    
    
		console.log(newLength);
	},
	immediate: true,
	deep: true

},