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>