Vuex实现数据存取教程（跨组件监听vuex数据变化）

最新推荐文章于 2025-04-28 19:01:04 发布

原创最新推荐文章于 2025-04-28 19:01:04 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

前端技术教程专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用Vuex管理开发者的状态，包括创建store、模块划分、在组件中操作数据及跨组件监听数据变化。通过实例演示了如何在组件间同步开发者名称，并展示了两种数据获取方式：直接state和mapGetters。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

store目录：

store > index.js
store > developer > common.js

common.js代码如下：

const developer = {
  namespaced: true,
  state: {
    developerInfo: {},
  },
  getters: {
    getDeveloperInfo: state => state.developerInfo,
  },
  mutations: {
    setDeveloperInfo(state, data) {
      state.developerInfo = data;
    },
  },
  actions: {
    setDeveloperInfo({ commit }, { data }) {
      commit('setDeveloperInfo', data);
    },
  }
};

export default developer;

index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import developer from './developer/common'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    developer: developer
  }
})

2. 在main.js中引入vuex

import store from './store/index'

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

3. 在组件中通过vuex存储数据

<template>
	<div>
		<h3>点击按钮修改开发者名称并同步更新header头部显示的开发者名称</h3>
		<el-button type="primary" @click="editMessage">修改开发者信息</el-button>

		<p>当前开发者名称：{{ developerName }}</p>
	</div>
</template>

<script>
	import { mapActions } from 'vuex'

	export default {
		data() {
			return {
				developerName: 'peter',
			}
		},
		methods: {
			...mapActions({
				setDeveloperInfo: 'developer/setDeveloperInfo',
			}),
			//修改开发者信息
			editMessage() {
				this.developerName = 'vivian';

				this.setDeveloperInfo({
					data: {
						developerName: 'vivian',
					}
				})
			},
		},
		mounted() {
			
		},
	}
</script>

4. 在组件中通过vuex读取数据

vuex读取数据可以采用以下两种方式：

（1）直接采用this.$store.state读取

<script>
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
			console.log(this.$store.state.developer.developerInfo.developerName);  //vivian
		},
	}
</script>

（2）通过mapGetters读取

<script>
	import { mapGetters } from 'vuex'

	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapGetters({
	            getDeveloperInfo: 'developer/getDeveloperInfo',
	        }),
		},
		mounted() {
			console.log(this.getDeveloperInfo.developerName);  //vivian
		},
	}
</script>

5. 跨组件监听vuex数据变化

按照上面的示例，假如我点击按钮“修改开发者名称”，实现更新当前组件中的“开发者名称”，并且，还要同步更新header头部显示的开发者名称，在这种情况下，两个组件并没有父子或者兄弟的关系，所以需要跨组件监听vuex数据变化。

“修改开发者名称”的代码依然保持步骤3**《在组件中通过vuex存储数据》**保持不变即可。

header组件中进行vuex数据监听

<template>
    <div>
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo">
                <h1>企业管理系统</h1>
            </el-col>
            <el-col :span="14">
                <span class="agent-name">{{agentName}}</span>
                <img :src="agentLogo" class="agent-logo">
            </el-col>
        </el-col>         
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        data(){
            return {
                agentName: '',
                agentLogo: '../static/img/devLogo.png'	                          
            }
        },  
        computed: {
            getDeveloperInfo() {
                return this.$store.state.developer.developerInfo;
            }
        },    
        methods: { 
            //获取名称和logo
            getAgentMessage() {
                let userObj = JSON.parse(sessionStorage.getItem('userObj'));
                let timeStamp = new Date().getTime();
                this.agentName = userObj.accountName;
                if (userObj.isHasLogo == true) {
                    this.agentLogo = userObj.logoUrl + '?time=' + timeStamp;
                };
            },         
        },       
        mounted(){
            this.getAgentMessage();
        },
        watch: {
            getDeveloperInfo(newValue) {
                if (newValue) {
                    this.agentName = newValue.developerName
                }
            }
        }
    }
</script>