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

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

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

1. 在src目录下创建store目录

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>
### 在 Vuex 中存取数据的详细方法 VuexVue.js 的状态管理库,用于集中管理应用的状态。以下是关于如何在 Vuex 中存取数据的专业解析与代码示例。 #### 创建 Vuex Store 首先,在 `store/index.js` 文件中创建 Vuex Store,并定义 `state`、`mutations` 和 `actions` 等核心部分[^2]。 ```javascript // store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0, // 定义初始状态 }, mutations: { increment(state) { // 修改 state 的方法 state.count++; }, }, actions: { incrementAction({ commit }) { // 提交 mutation 的方法 commit('increment'); }, }, getters: { getCount: (state) => state.count, // 获取 state 的方法 }, }); ``` #### 存储数据Vuex 通过 `mutations` 来存储数据Vuex 的 `state` 中。以下是一个示例,展示如何将数据提交到 Vuex[^1]。 ```javascript this.$store.commit("print/setPrint", { // 调用 mutation 方法 ID: this.ID, BrandID: 402, }); ``` 在上述代码中,`setPrint` 是一个 mutation 方法,位于 `modules/print` 模块中。 #### 从 Vuex 中获取数据 使用 `getters` 或 `mapState` 辅助函数从 Vuex 中获取数据[^3]。 ```javascript import { mapState } from "vuex"; export default { computed: { ...mapState({ print: (state) => state.print.all, // 映射 state 数据 }), }, }; ``` 此外,也可以直接通过 `this.$store.getters` 获取数据: ```javascript const count = this.$store.getters.getCount; // 使用 getter 获取数据 ``` #### 异步操作与 Actions 当需要执行异步操作时,可以使用 `actions`。以下是一个示例,展示如何通过 `actions` 获取数据并更新 `state`[^2]。 ```javascript // store/index.js actions: { getGkpc({ commit }) { return new Promise((resolve) => { getSetCode('riskIdentificationLibrary_gkpc').then((res) => { commit('updateGkpc', res.rows); // 调用 mutation 更新 state resolve(res); }); }); }, }, ``` 调用 `action` 的方式如下: ```javascript this.$store.dispatch('getGkpc').then((res) => { console.log('获取的数据:', res, this.$store.getters.gkpc); }); ``` #### Vue 3 中的 Vuex 数据存取Vue 3 中,Vuex 的使用方式略有不同。以下是一个完整的示例。 ```javascript // store/modules/user.ts export default { namespaced: true, state: () => ({ token: localStorage.getItem('token') || '测试token', userinfo: '测试userinfo', }), mutations: { setToken(state, token) { state.token = token; localStorage.setItem('token', token); }, setUserInfo(state, userinfo) { state.userinfo = userinfo; localStorage.setItem('userinfo', userinfo); }, }, actions: {}, }; ``` ```javascript // store/index.ts import { createStore } from 'vuex'; import user from './modules/user'; export default createStore({ modules: { user, }, }); ``` 在组件中调用: ```javascript import { useStore } from 'vuex'; export default { setup() { const store = useStore(); const setUserData = () => { store.commit('user/setToken', 'new_token'); // 设置 token store.commit('user/setUserInfo', 'new_userinfo'); // 设置用户信息 }; return { setUserData }; }, }; ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值