详细讲解
前言
定义comm.js文件
定义getters.js文件
定义index.js文件
使用
监听值的变化
前言
现在需要满足这样一个场景：
很多页面都要共用一个变量的值，同时要监听变量值的变化，随之做相应的操作，如果用页面传参之类的方法就太费劲了，所以采用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
}, 原文链接：https://blog.csdn.net/zwjzone/article/details/126510640
